选中当前地址变换样式
作者:蛛蛛虎 日期:2010-07-01
当前地址高亮——选中后变换样式，这个效果看起来挺简单，做起来却又些吃力。和飞晏请教了下。收获挺大的，整理下自己的思路。
效果实现可以通过JS或程序来控制CSS实现。原理：判断当前的Url与超链接的Url进行比较判断，如果相同则输出特殊的Css样式。
效果如下：
效果通过Js控制实现，代码如下：
<style type="text/css">
body{margin:0 auto;}
.dq{
font-size:15px;
font-weight:bold;
color:#903;
background-color:#CCF;
}
#nav{ width:750px; margin:0 auto;
text-align:center;
margin-top:50px;}
a{ font-size:12px;
color:#000;
text-decoration:none;}
li{float:left; width:75px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.spiger.cn/article/236.html?id=1" title="博客主页">博客主页</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=2" title="网络笔记">网络笔记</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=3" title="安全防御">安全防御</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=4" title="编程天地">编程天地</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=5" title="网站设计">网站设计</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=6" title="Ps 美工">Ps 美工</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=7" title="心灵随感">心灵随感</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=8" title="休闲杂谈">休闲杂谈</a></li>
<li><a href="http://www.spiger.cn/article/236.html?id=9" 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="dq";
}
}
</script>
上一篇: 精确到秒的倒计时Js
下一篇: IIS未加载Rewrite的解决方法
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: js
相关日志:
回复
huangjun[2010-07-07 12:55 AM | 
| 
| 湖北省武汉市 电信| 
| 取消审核]
