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>
相关文章推荐
- JavaScript实现导航动态效果实践
- javascript 动态样式添加的简单实现
- 使用JavaScript动态设置样式实现代码(2)
- 使用JavaScript动态设置样式实现代码及演示动画
- JavaScript插入动态样式实现代码
- JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航
- JavaScript+CSS实现表格动态样式
- JavaScript插入动态样式实现代码
- JavaScript+CSS实现表格动态样式
- jQuery实现的背景动态变化导航菜单效果
- 使用JavaScript动态设置样式实现代码及演示动画
- javascript实现的鼠标悬停时动态翻滚的导航条
- JavaScript实现动态导航
- 使用JavaScript动态设置样式实现代码(2)
- javascript实现css主题样式切换;动态改变引入的css文件;
- javascript页面动态显示时间变化示例代码
- jQuery实现鼠标滚轮动态改变样式或效果
- 如何实现JavaScript动态加载CSS和JS文件