您的位置:首页 > Web前端 > JavaScript

JavaScript实现导航样式动态变化

2011-03-31 16:57 447 查看
在做开发时,遇到“关于我们”页面一个这样的需求,导航样式动态变化 url类似http://rencai.test.com/main.php?module=about#connectus

<li><a href="#about" mce_href="#about" id="aboutNav" onclick="changeNavStyle(this.id)">关于<{$sitename}></a></li>
<li><a href="#advertise" mce_href="#advertise" id="advertiseNav" onclick="changeNavStyle(this.id)">广告服务</a></li>
<li><a href="#connectus" mce_href="#connectus" id="connectusNav" onclick="changeNavStyle(this.id)">联系我们</a></li>
<li><a href="#help" mce_href="#help" id="helpNav" onclick="changeNavStyle(this.id)">帮助中心</a></li>
<li><a href="#declare" mce_href="#declare" id="declareNav" onclick="changeNavStyle(this.id)">免责声明</a></li>


<mce:script type="text/javascript"><!--
var url = window.location;
url = url.toString();
var id = url.substr(url.indexOf("#")+1)+"Nav";
changeNavStyle(id);
function $(id) {
return document.getElementById(id);
}
function changeNavStyle(id) {
var nav = new Array("aboutNav","advertiseNav","connectusNav","helpNav","declareNav");
for(var i=0;i<nav.length;i++) {
if(nav[i]==id) {
$(id).style.color = "#049";
}else {
$(nav[i]).style.color = "";
}
}
}
// --></mce:script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: