网站导航栏目焦点设置

  一般访问网站时,访问到不同的栏目,导航上的链接会高亮,显示的样式和其他栏目不一样,这种效果实现很简单,原理如下

  获取当前的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>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:网站导航栏目焦点设置

评论(0)Web开发网
阅读(1722)喜欢(6)JavaScript/Ajax开发技巧