网站导航栏目焦点设置
一般访问网站时,访问到不同的栏目,导航上的链接会高亮,显示的样式和其他栏目不一样,这种效果实现很简单,原理如下
获取当前的url路径location.pathname,然后和导航中的链接匹配,匹配了就设置焦点样式。如果栏目不是页面,而是通过传递参数来实现,可以location.search中获取栏目参数来匹配。
下面是一个就简单的示例,建立1.html,2.html,3.html,4.html文件,内容全部为下面贴出的html代码,效果如下
<div id="dvGuider"> <a href="1.html">1.html</a> <a href="2.html">2.html</a> <a href="3.html">3.html</a> <a href="4.html">4.html</a> </div> <style> a.focus{background:#ff0000;color:#ffffff;} </style> <script> var pn = location.pathname; var as = document.getElementById('dvGuider').getElementsByTagName('a'),find=false; for (var i = 0, j = as.length; i < j; i++) if (as[i].href.indexOf(pn) != -1) { as[i].className = 'focus'; find = true; break; } //if (!find) as[0].className = 'focus';//如果未找到匹配的,需要设置哪个获取焦点可以修改这句 </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:网站导航栏目焦点设置