JQ- TAB切换  可增减选项版

 

JQ代码 ：

 

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".menu li").click(function(){

$(this).addClass("on").siblings().removeClass("on");

//选择当前点击项，添加.on类，并选择同级元素，删除.on类

var index = $(".menu>li").index($(this));

//定义index变量 ,获取当前点击的li在.menu li这个选择器选择到的li中的位置

 $(".main>div:eq("+index+")").show().siblings().hide();

 //.main 下面的 div中索引位置等于index的本身显示 其他的隐藏

});

});

</script>


CSS代码 ：

 

<style type="text/css">

.menu {float: left;list-style-type: none;height:30px;line-height:30px;border-right:solid 1px #ccc;float:left;padding:0;margin:0;}

.menu li{float:left;width:100px;text-align:center;border:solid 1px #ccc;border-right:none;cursor:pointer;}

.main{float:left;clear:left;margin-bottom:20px; }

.menu .on{border-top:solid 1px #a40000;border-bottom:solid 1px #fff;}

.tab{height:200px;width:403px;float:left;clear:both;border:solid 1px #ccc;border-top:none;line-height:200px;text-align:center;}

</style>

HTML代码 ：
<ul class="menu">
<li class="on">AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
</ul>
<div class="main">
    <div class="tab">AAA</div>
    <div class="tab" style="display:none;">BBB</div>
    <div class="tab" style="display:none;">CCC</div>
    <div class="tab" style="display:none;">DDD</div>
</div>
PS：源代码已上传，需要的可以下载看看