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

例如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类。