联系电话:020-28187900

输出当前栏目高亮显示

发表时间:2012-07-31 阅读: 3191

当前栏目高亮是在网页上用醒目的字体颜色或者背景颜色等来区分显示当前所在的位置,从而让用户更加快速定位当前页面所属的栏目,以提高用户体验。当前栏目高亮经常应用于网站的导航、左右侧导航和下部导航。如下图


以下例子的当前CSS均为:.topmeun_on

方法1:

链接应用的高亮

{@res table='%s_link' field='name,url' where='cid=1' order='norder,id'}
{#foreach($res as $rs)}
<a href="{$rs[url]}"{?=$_SERVER['REQUEST_URI']==$rs['url']?' class="topmenu_on" ' :''?}>{$rs[name]}</a> 
{#endforeach}

判断语句:{?=$_SERVER['REQUEST_URI']==$rs['url']?' class="topmenu_on" ' :''?}

$_SERVER["REQUEST_URI"]函数:预定义服务器变量的一种,所有$_SERVER开头的都叫做预定义服务器变量 REQUEST_URI的作用是取得当前URI,也就是除域名外后面的完整的地址路径

比如说:当前页面是http://www.focuznet.com/k9/c2/,$_SERVER["REQUEST_URI"]的结果就为:/k9/c2/,正好是与链接应用的的链接地址的命名规则一致。

方法2:

利用$_SERVER["REQUEST_URI"]函数来实现2级或2级以上分类的高亮

{@res table='%s_content_categroy' field='cid,name,url' where="cid1={$info['cid1']}" order='norder,cid'}
{#foreach($res as $rs)}
<li {?=strtolower($_SERVER['REQUEST_URI'])==strtolower('/'.$rs['url']) ? ' class="topmenu_on" ' :' '?}><a href="{DIR}{$rs[url]}" >{$rs[name]}</a></li>
{#endforeach}

判断语句:{?=strtolower($_SERVER['REQUEST_URI'])==strtolower('/'.$rs['url']) ? ' class="topmenu_on" ' :' '?}

因为分类的路径命名规则的前面是不加“/”。为了考虑到大小写不同的问题,外加一个strtolower函数,都改成小写。

注意:此方法暂不支持分页2以后的页面,只支持频道首页,应该是可以用正则来实现的。有研究出来的可联系判官的扣扣:1713020505

方法3:

利用分类的cid来实现2级或2级以上分类的高亮

{@res table='%s_content_categroy' field='cid,name,url' where="cid1={$info['cid1']}" order='norder,cid'}
{#foreach($res as $rs)}
<li {?=($info['cid'])==($rs['cid']) ? ' class="topmenu_on" ' :' '?}><a href="{DIR}{$rs[url]}" title="{$rs[name]}">{$rs[name]}</a></li>
{#endforeach}
判断语句:{?=($info['cid'])==($rs['cid']) ? ' class="topmenu_on" ' :' '?}

在K9中,每一个cid过都是固定并有唯一性的,所有有时候巧用cid会简单得多。此方法是支持分页的,本站的右侧高亮用的便用此类 方法

方法4:

用样式表来实现。旁门左道,不建议使用

.topmeun_on_{$info[cid]}{color:red;}

{@res table='%s_content_categroy' field='cid,name,url' where="cid1={$info['cid1']}" order='norder,cid'}
{#foreach($res as $rs)}
<li class="topmeun_on_{$rs[cid]}"><a href="{DIR}{$rs[url]}" title="{$rs[name]}">{$rs[name]}</a></li>
{#endforeach}


转载请注明出处:唯众网络


相关教程 【更多】

唯众网络