导航栏ajax,网站导航栏目焦点设置

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

获取当前的url路径location.pathname，然后和导航中的链接匹配，匹配了就设置焦点样式。如果栏目不是页面，而是通过传递参数来实现，可以location.search中获取栏目参数来匹配。

下面是一个就简单的示例，建立1.html,2.html,3.html,4.html文件，内容全部为下面贴出的html代码，效果如下

1.html

2.html

3.html

4.html

a.focus{background:#ff0000;color:#ffffff;}

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';//如果未找到匹配的，需要设置哪个获取焦点可以修改这句

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

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

2013-4-11Web开发网