js实现动态改变菜单栏颜色（兄弟节点的知识）

来源：互联网发布：淘宝真丝针织背心编辑：程序博客网时间：2024/05/22 13:41

例如1：图在不刷新网页的情况下（使用JavaScript改变内存），鼠标点击选项动态改变背景颜色。

代码：

（HTML代码）

                        <div class="menu"><ul><li class="layout-blogger-typemenu-licolor layout-blogger-typemenuli"><a href="#">All</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">Java</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">C++</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">C#</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">SQL</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">Pyhton</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">Html</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">CSS</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">MySql</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">Tool</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">前端</a></li><li class="layout-blogger-typemenu-licolor"><a href="#">后台</a></li><li class="layout-blogger-typemenu-licolor"><a href="<c:url value="/dynamic"/>?act=write_blogger">WriteB</a></li></ul></div>

（CSS代码）

       /*主要类*/        .menu{position: fixed;left: 0;top: 0;bottom: 0;width: 100px;height: 100%;margin: 60px 0 0 120px;/* background-color: #05486c; */}.layout-blogger-typemenu ul{width: 100%;height: 100%;list-style-type: none;margin-top: 40px;}.layout-blogger-typemenu ul li{width: 100px;height: 36px;font-size: 16px;}/*主要类*/        .layout-blogger-typemenu-licolor{background-color: #05486c;}.layout-blogger-typemenuli{background-color: #399;}.layout-blogger-typemenu ul li:hover{background-color: #3e897b;}.layout-blogger-typemenu ul li a{text-align: center;padding-top: 7px;display: block;width: 100%;height: 100%;text-decoration: none;color: #fff;}

（JavaScript代码）

   <script type="text/javascript">   $(function(){$('.layout-blogger-typemenu ul li').click(function() {var _this=$(this);_this.addClass('layout-blogger-typemenuli').siblings('li').removeClass('layout-blogger-typemenuli');});});   </script>

JavaScript代码说明：首先通过类定位到 layout-blogger-typemenu 中说明接下来要获取的兄弟节点在这个范围内的是 li 标签。注意:( .layout-blogger-typemenu前的点)
第4行先在当前点击的li中添加 layout-blogger-typemenuli 类然后在删除兄弟li中的 layout-blogger-typemenuli类。

1 0