澳门新葡萄京官网注册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(liState of Qatar;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

**为了充实顾客体验度,扩充网页的易用性和奇妙度,往往需求把这两天导航菜单以新鲜措施展示,常常是高亮显示或有不一致于别的菜单的背景,有两种情势能够兑现,第一种是用纯css来促成,二是用js扶持css来完成,三个种办法都比较容易,相对而言js更简短些,下边介绍用js来得以完毕的方法:

js完成当前导航菜单高亮显示

首页假诺大家的领航代码是那般写的:

HTML:
<div id=”navi”>
<ul>
    <li><a href=””>主页1</a><li>
    <li><a href=””>主页2</a><li>
    <li><a href=””>主页3</a><li>
    <li><a href=””>主页4</a><li>
</ul>
</div>

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

js代码:
<script type=”text/javascript” language=”javascript”>
var 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;i<links.length;i++)
{
   var linkurl =  lilen.getAttribute(“href”);
     if(currenturl.indexOf(linkurl)!=-1)
        {
         last = i;
        }
}
         links[last].className = “current”;
</script>

下面是js代码:
<script type=”text/javascript” language=”javascript”>
var 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;i<links.length;i++)
{
   var linkurl =  lilen[i].getAttribute(“href”);
     if(currenturl.indexOf(linkurl)!=-1)
        {
         last = i;
        }
}
         links[last].className = “hl”;
</script>

1.js代码一定要加到body里,即加到导航的底下,无法加到head里,不然出错不能够选用。

复制这段js代码加到body里。注意:
1.getElementById(“navi”卡塔尔(قطر‎;这一句括号里的navi必得与<div
id=”navi”>里的navi一致。
2.js代码必需加到body里,即加到导航的底下,不能加到head里,不然出错无法应用。
3.links[last].className = “hl”;中的hl是高亮代码的样式类名。
末尾再写一下高亮的css代码就能够了,如下:
#navi ul li.hl a{
color:#123456;
}
这么就兑现当前导航菜单高亮展现了。**

2.也可径直写到JS文件中程导弹入HTML中。

发表评论

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