JavaScript实现菜单视觉标识

发表于 2010年9月4日由 kily

以前写过一篇文章也是关于视觉标识的：《CSS实现视觉标识》。在这篇文章中我介绍了用CSS来实现视觉标识的效果，但是里面的DEMO只有一个页面，而且链接没有动态的参数。

很多时候我们在实际开发的时候都是在同一个页面而且有如：“article.php?id=10”这样的样子，看下面这段代码：

<ul id=”menu”>
<li><a id=”a11″ href=”?id=11″>index</a></li>
<li><a id=”a12″ href=”?id=12″>video</a></li>
<li><a id=”a13″ href=”?id=13″>music</a></li>
<li><a id=”a14″ href=”?id=14″>message</a></li>
</ul>

当我们想用JS来在当前页面写代码实现点击后变色，可能你会想到下面这段JS代码：

var menu = document.getElementById(“menu”);
var menuA = menu.getElementsByTagName(“a”);
for ( var i = 0; i<menuA.length; i++ ) {
menuA[i].onclick=function(e){
this.style.background=”red”;
return false;
}
}

但是这段代码确没有达到效果。

原因：

因为只有一个页面而且每个链接都是有参数的，点击任何一个链接都会重新载入页面。DOM重新载入，那么JS的效果就不起作用了。

解决方法：

在页面每次载入时取出URL的参数，对应的给每个A链接加上ID。页面载入时判断参数与ID是否一致，一致就给链接动态加上样式Class。正确的JS是这样写的：

var str = window.location.search.substring(4,6); //取参数ID号
var menu = document.getElementById(“menu”);
var menuA = menu.getElementsByTagName(“a”);       //获取所有链接
for ( var i = 0; i<menuA.length; i++ ) {          //循环确定是否匹配
var menuAID = menuA[i].getAttribute(“id”).substring(1,3);
if ( str == menuAID ) {
menuA[i].className = “active”;            //动态加上class
}
}

查看DEMO效果

特别感谢青色和亚当学院3群的同学提供思路。

《JavaScript实现菜单视觉标识》上有 29 条评论

比度克在 2010年10月4日09:59 说：

链接失效了！

回复 ↓
笔记本配件在 2010年9月27日13:17 说：

各种笔记本配件销售，批发，你想升级自己的笔记本吗，请到三色笔记本配件商城选自己合适的配件

回复 ↓
萨摩耶论坛在 2010年9月23日15:06 说：

提供萨摩耶详细信息

回复 ↓
视觉元素在 2010年9月23日10:25 说：

你好，keelii，我是视觉元素，首先谢谢你上次对我的帮助，现在有一个小问题想请求你，就是我的博客不能正常显示评论，请问我改怎么修改，期待你的回复。
http://www.sjysvip.com/hdyst/

回复 ↓
QiQiBoY 在 2010年9月22日00:55 说：

不得不说，很烂的思路。。
首先
document.getElementsByTagName(“a”).onclick = function(){
this.style.backgroundColor = “red”;
}
就是错误的代码，getElementsByTagName获取的是DOM节点集合，这不是jQuery对象，哪能直接全部绑定事件。
改下你的代码
var menu = document.getElementById(“menu”);
var menuA = menu.getElementsByTagName(“a”);
for ( var i = 0; i<menuA.length; i++ ) {
menuA[i].onclick=function(e){
this.style.background="red";
return false;
}
}

回复 ↓
- kily 在 2010年9月23日12:16 说：
  
  @QiQiBoY 嗯。我也在摸索中哈。感谢提示。那段代码本来就是错的，关于这个效果的实现你有什么更好的方法还请指教呀！
  
  回复 ↓
福州seo 在 2010年9月21日11:42 说：

好久没有过来了，文章写的不错！

回复 ↓
小可人在 2010年9月20日20:43 说：

查看了一下效果，很不错

回复 ↓
破碎机在 2010年9月16日13:24 说：

将要学习wp的模板制作，以后也会接触css的

回复 ↓
Eric 在 2010年9月15日22:52 说：

拿过去测试下

回复 ↓
购物返利在 2010年9月15日12:19 说：

支持一下，希望网站办得越来越好

回复 ↓
武汉seo 在 2010年9月14日22:51 说：

文章写得非常好，怀安学习了，以后会经常来光顾。

回复 ↓
Ray 在 2010年9月9日10:06 说：

我是一个代码忙。

回复 ↓
Ray 在 2010年9月9日10:05 说：

我是一个代码盲

回复 ↓
学夫子在 2010年9月8日16:43 说：

js实在是很强大，无奈我是一点都不懂，呵呵

回复 ↓
gonghao 在 2010年9月8日09:17 说：

其实这个时候最合适的不是js处理，而是后台直接把相关class参数传过去，因为页面有刷新的机会何不让后台代码直接搞定呢~

回复 ↓
- kily 在 2010年9月8日09:22 说：
  
  @gonghao 呵呵。后台说他搞不定哈。
  
  回复 ↓
安在 2010年9月7日17:22 说：

现在静不下心看这些了..

回复 ↓
- kily 在 2010年9月7日20:28 说：
  
  @安等能静下心来的时候看哈^!^
  
  回复 ↓
KYO 在 2010年9月6日14:56 说：

呵呵，看来有很多人都关心你，找到工作了。继续忙吧。有很多烦心事就要来了。在北京闯荡，不容易。

回复 ↓
- kily 在 2010年9月7日20:30 说：
  
  @KYO 哈哈。还好吧，谢谢关心。什么时候改的名字我都不知道哈。好久没去你那里了哦。
  
  回复 ↓
踏雪残情在 2010年9月5日11:05 说：

这方法不错，学习一下，可以省去后台脚本写标识的代码了。

回复 ↓
林西老九在 2010年9月5日09:04 说：

好看，嘿嘿。我来了，鄙视一下前几楼，不让我抢沙发

回复 ↓
- kily 在 2010年9月5日10:51 说：
  
  @林西老九呵呵。这个怪我没经常更新，被沙发的机率是低了点哈。
  
  回复 ↓
山水画在 2010年9月4日20:15 说：

步骤很详细，谢谢啦

回复 ↓
追梦在 2010年9月4日19:32 说：

呵呵，不错的方法，下次说不定用得上O(∩_∩)O~
找到工作啦？

回复 ↓
- kily 在 2010年9月4日21:50 说：
  
  @追梦嗯。都上了两周班了哈。
  
  回复 ↓
飞晏在 2010年9月4日12:54 说：

如果加上cookies可以动态改变样式
哥们儿栖息在北京哪里了

回复 ↓
- kily 在 2010年9月4日21:49 说：
  
  @飞晏呵呵。在呢，刚在一家公司工作了有两周！
  
  回复 ↓

发表评论取消回复