选择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(naviState of Qatar; 中的想同,即在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

**为了充实顾客体验度,扩展网页的易用性和华美度,往往必要把当前导航菜单以特别情势显示,平常是高亮彰显或有差别于其余菜单的背景,有三种办法能够兑现,第一种是用纯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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注