行为篇 上面的效果似乎离我的理想状态的菜单又更进了一步。不过也有暇痴。 1. 如我点击一个菜单后其焦点虚线框让人感到非常讨厌。 2. 还有点击后不能高亮记录当前选中项。 一步一步来解决吧！ 为了除去此虚线框，我们可以在A标签属性中加入onfocus="this.blur();"这句代码，这是非常立竿见影的方法。那么就需要在结构上添加一些内容，可能就会变成下面这种结构了：

冰极峰博客

可是，我们别忘了，要尽量避免“行为”给“结构”造成干扰，这是我们在开始就提出的要求。因此，这种方法基本上可以否决了。 另外我们想记录当前选中项菜单，这种制作方法有很多种，纯CSS的做法可能会为每一个菜单项创建一个ID，然后用样式表来设置不同页面下调用高亮菜单的样式。但这种方法又会对结构添加一些字符。 上面两个解决方案都需要在结构中嵌入一些本来该用“动作”来表现的东西，这会造成结构冗余，可读性较差，并且给人感觉页面很乱。 我想该是JS粉墨登场的时候了... 我想在页面一载入时就遍历UL下的所有A标签，自动给它加上一个样式，这个样式就是li a的样式，我们可以将它改成一个class类，我们取名为normal吧，方便JS动态调用，并将li a:hover也换成一个class类，取名为over，作为JS动态调用鼠标移上时的效果，而li a:active就是当前选中状态了,取名为cur，将它们三个都在样式表中作出修改。 在页面载入后，用for循环给每个菜单A标签注入onclick，onmouseover，onmouseout事件，我们就可以摒弃用 a:link，a:hover，a:active来摸拟三态效果了，因为这样更便于控制当前选中菜单的高亮效果。顺便在这个循环中去掉讨厌的虚线框（虽说在FF下只用一句样式就可以搞定，但在IE中显然是不行的！）。然后我们用cookie来记录选中的菜单项ID，并设置其为5分钟后过期。这样无论你如何恶意刷屏，高亮菜单还是能记住。（是否采用cookie方式来保持高亮，这可以根据不同的项目需求来定。这种方式也有不好的地方，有同好者可以交流一下！） Js中创建了几个基本的函数，看起来就像下面这样（详细代码请参看源码）： var temp;/*菜单ID*/ function getObj(objName){return(document.getElementById(objName));} window.onload =function() { var obj=getObj("menu");/*ul的id*/ var obj_a=obj.getElementsByTagName("a"); number=obj_a.length; for (var i=0,j=obj_a.length;i 标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：蓝色理想

上一篇：Java SE 7语言若干改进 支持Strings状态转换 下一篇：手工打造分离式滑动门导航菜单(一)