帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造。

高亮显示导航栏代码,通用方式,包括所在内容页看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据js来实现的。如果需要你就试下吧方法如下,大家可以举一反三,其实是很简单的修改:div
class=header ul class=menu mct id=navi lia href=/首页/a/li lia
href=/wangluodongtai/网络动态/a/li lia href=/youhuajiqiao/优化技巧/a/li
lia href=/huozaidangxia/活在当下/a/li lia
href=/woaibiancheng/我爱编程/a/li lia href=/xiaojiqiao/小技巧/a/li lia
href=/hulianwangwen/互联网文/a/li /ul/divscript type=text/javascript
language=javascriptvar nav = document.getElementById(navi);var links =
nav.getElementsByTagName(li);var lilen = nav.getElementsByTagName(a);
//判断地址var currenturl = document.location.href;var last = 0;for (var
i=0;ilinks.length;i++){ var linkurl = lilen[i].getAttribute(href);
if(currenturl.indexOf(linkurl)!=-1) { last = i; }}
links[last].className = menufirst; //高亮代码样式/script说明: ul
class=menu mct id=navi 中的ID值要和 var nav =
document.getElementById(navi); 中的想同,即在js中获取id=navi
值,这个值要唯一,不能跟其它CSS或JS代码中ID同名,或者自己改成别的名字。
links[last].className = menufirst; 这一句中的 menufirst
为你的高亮样式。————————————————————————-例如:div
id=main-navdiv class=wrap cf ul id=navi3 class=menuli a
href=!–news.url–]首页/a/li[e:loop={select classname,classpath from
[澳门新葡亰3522平台游戏,!db.pre!]enewsclass where bclassid=58 order by classid ,0,24,0}]lia
href=?=$public_r[newsurl]??=$bqr[classpath]??=$bqr[classname]?/a/li[/e:loop]
/ul/divscript type=text/javascript language=javascriptvar nav =
document.getElementById(navi3);var links =
nav.getElementsByTagName(li);var lilen = nav.getElementsByTagName(a);
//判断地址var currenturl = document.location.href;var last = 0;for (var
i=0;ilinks.length;i++){ var linkurl = lilen[i].getAttribute(href);
if(currenturl.indexOf(linkurl)!=-1) { last = i; }}
links[last].className = current-menu-item; //高亮代码样式/script

**为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两个种方法都比较简单,相对而言js更简单些,下面介绍用js来实现的方法:

首页假设我们的导航代码是这样写的:

<div id=”navi”>
<ul>
<li><a href=”1.html”>主页</a></li>
<li><a href=”2.html”>栏目1</a></li>
</ul>
</div>