查看内容

使用JS方法修改改造

  • 2020-04-16 01:16
  • 编程人生
  • Views

高亮显示导航栏代码,通用方式,包括所在内容页看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据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 [!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