嘻皮客娱乐学习网
标题:
导航条高亮显示当前URL链接的方法
[打印本页]
作者:
有你的天堂
时间:
2014-10-29 16:43
标题:
导航条高亮显示当前URL链接的方法
导航条高亮显示当前URL链接的方法
之前看到过很多网站的导航条有这个效果，就是当打开某一个导航链接的时候，这个链接就会显示不同的样式。我一直非常好奇这是怎么实现的，遂google百度一番，终于明白了。
导航条高亮显示当前URL链接的方法
。
这个是用JS写的，判断当前URL对当前链接高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class样式。
实例：
<ol><div id="nav">
<ul>
<li><a href="http://www.diannaojishu.com" title="首页">首 页</a></li>
<li><a href="http://www.diannaojishu.com" title="电脑入门">电脑入门</a></li>
<li><a href="http://www.diannaojishu.com" title="网络技术">网络技术</a></li>
<li><a href="http://www.diannaojishu.com" title="编程入门">编程入门</a></li>
</ul>
</div>
//JS代码：
var
myNav
=
document
.
getElementById
(
"
nav
"
)
.
getElementsByTagName
(
"
a
"
)
;
for
(
var
i
=
0
;
i
<
myNav
.
length
;
i
++
)
{
var
links
=
myNav
[
i
]
.
getAttribute
(
"
href
"
)
;
//alert(links)
//alert(myNav
);
var
myURL
=
document
.
location
.
href
;
if
(
myURL
.
indexOf
(
links
)
!= -
1
)
{
myNav
[
i
]
.
className
=
"
d
"
;
}
}
欢迎光临 嘻皮客娱乐学习网 (http://www.xipick.com/)
Powered by Discuz! X3.3