js实现选中的目录改变样式（如背景颜色）

js实现选中的目录改变样式（如背景颜色）即当前点击的目录加上一个特定的样式，当点击其他目录是，则将该样式从该目录移除并加到被点击的新目录上。

如图a，b，c三个网页

其中a.html代码如下：

 .current{
  background:blue;
  color:#fff;
}
 
<div >
                     <ul id="menu">
                    <li><a href="#">a</a></li> 
                    <li><a href="b.html">b</a></li>
                    <li><a href="c.html">c</a></li>
                    </ul>
                    </div>aaaaaaaaaa
<script type="text/javascript">
 
function InitMenu(){
    var _menu = document.getElementById("menu").getElementsByTagName("li");
    var _page =window.location.pathname;
    if(_page=='/'){_menu[0].className='current';return}
    for(i=0;i<_menu.length;i++)
    {
        if(_menu[i].getElementsByTagName("a")[0].href.indexOf(_page)!=-1){_menu[i].className='current';break;}
    }
}
InitMenu();
</script>

b.html和c.htmlcss样式和js都不变，html部分改变如下

 <div >
                     <ul id="menu">
                    <li><a href="a.html">a</a></li> 
                    <li><a href="b.html">b</a></li>
                    <li><a href="c.html">c</a></li>
                    </ul>
                    </div>bbbbbbbbbbbbbb

 这样就可以实现js实现选中的目录改变样式。

效果图：

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈