TAB子页面切换中遇到的问题

一个页面有时需要显示多项内容，每项内容都是一个子页，切换项目的时候内容部分会切换。实现这个功能可以用iframe，现在没有用到iframe，通过js控制内容的显示与隐藏。

但这样存在问题，假设有三个子页，当第二个子页必须刷新时，页面重新加载得到的却是第一个子页的内容（因为三个子页是一个整体，而第一个子页为默认显示页面）。

这个时候可以通过在URL中添加一个参数标识将要显示第几个子页（例如tab=2显示第二个子页），然后在模板页处理时直接设置子页的css类，隐藏或者显示子页。

当使用URL参数时，可以在控制器类中根据参数值直接设置相应子页的css类参数。

例如当tab = 1时，设置tab_1_class = "hidden", tab_2_class = "selected", tab_3_class = "hidden"，然后在子页相应位置输出这些参数，但这样做增加了控制器和视图的耦合。

还可以在模板中通过三个判断来设置相应子页的显示与否，

以ThinkPHP模板为例

<eq name="tab" value="1">class="selected"</eq>

<eq name="tab" value="2">class="selected"</eq>

<eq name="tab" value="3">class="selected"</eq>

但这样降低了效率，

寻找一个折衷的办法，在视图中这样操作

tab_1_class = "hidden";

 tab_2_class = "hidden";

 tab_3_class = "hidden";

if(tab == 1)
{

   tab_1_class = "selected";

}else if ( tab == 2 )

{

  tab_2_class = "selected";

}else

{

 tab_3_class = "selected";

}

但这样似乎又破坏了视图的整洁性。

也可以在模板页面中写入子页的js参数，页面加载之后根据子页的js参数设置子页的显示与否，但这样做用户体验并不好，因为在页面加载之前和加载之后用户看到的是截然不同的内容。

同理，不再使用URL参数了，而使用URL锚点信息，在页面加载后用js获得锚点信息，然后根据锚点信息确定哪一个子页是当前需要显示的页面（location.lash可以获得锚点信息）。

编程生活中有很多折衷，怎么取舍，全凭项目及个人。