一个页面有时需要显示多项内容,每项内容都是一个子页,切换项目的时候内容部分会切换。实现这个功能可以用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可以获得锚点信息)。
编程生活中有很多折衷,怎么取舍,全凭项目及个人。