JQ实现导航栏切换效果

html代码

   <div class="nav">
        <ul>
            <li><a href="#">点击一</a></li>
            <li><a href="#">点击二</a></li>
            <li><a href="#">点击三</a></li>
            <li><a href="#">点击四</a></li>
        </ul>
    </div>

 

样式代码

<style type="text/css">
	*{
		padding:0px;
		margin:0px;
	}
	li{
		list-style: none;
	}

	.nav{
		width: 100%;
		height: 20px;
		line-height: 60px;
		height: 60px;
	}

	.nav li{
		width: 24%;
		float: left;
		background: #FFFF33;
		border: 1px solid #fff;
	}
	.nav li a{
		color: #666;
		text-align: center;
		display: block;
	}
	.nav li a:hover{
		color: #fff;
		background: #66CC00;
	}

	.on{
		color: #fff !important;
		background: #66CC00;
	}
</style>

　　

JQ代码
<script type="text/javascript">
        $(".nav li a").click(function(){
            $(this).addClass("on").parent().siblings().children().removeClass("on");
        })
</script>