JS判断当前URL对当前链接高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Codetrinis Test</title>
<style type="text/css">
a.daohang:link{color:#FF0000;}
a.daohang:visited{color:#FF0000;}
a.daohang:hover{color:#FF0000;}
a.daohang:active{color:#FF0000;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="file:///C:/Documents%20and%20Settings/Administrator/桌面/Untitled-1.html" title="首页">首 页</a></li>
<li><a href="http://www.qqdang.net/smiles-qq-face/index.html" title="搞笑表情">搞笑表情</a></li>
<li><a href="http://www.qqdang.net/emotion-qq-face/index.html" title="情感表情">情感表情</a></li>
<li><a href="http://www.qqdang.net/animal-qq-face/index.html" title="动物表情">动物表情</a></li>
<li><a href="http://www.qqdang.net/person-qq-face/index.html" title="人物表情">人物表情</a></li>
<li><a href="http://www.qqdang.net/holiday-qq-face/index.html" title="节日表情">节日表情</a></li>
<li><a href="http://www.qqdang.net/games-qq-face/index.html" title="游戏表情">游戏表情</a></li>
<li><a href="http://www.qqdang.net/hot-qq-face/index.html" title="热门表情">热门表情</a></li>
<li><a href="http://www.qqdang.net/classics-qq-face/index.html" title="经典表情">经典表情</a></li>
<li><a href="http://www.qqdang.net/special-qq-face/index.html" title="表情专辑">表情专辑</a></li>
<li><a href="http://www.qqdang.net/other-qq-face/index.html" title="其它表情">其它表情</a></li>
</ul>
</div>
<script type="text/javascript">
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[i]);
var myURL = document.location.href;
if(myURL.indexOf(links) != -1)
{
myNav[i].className="daohang";
}
}
</script>
</body>
</html> |
注册 登录
