現在的頁面上幾乎都要tab切換甚至不止一個，早有想法嘗試用一段代碼控制所有tab的方法，自己嘗試了一下。裏面有幾個要點抓住就好了。
<style>
.wrap{
width:100%;
height:800px;
position: relative;
}
.wrap2{
width:100%;
height:800px;
position: relative;
}
.title{
width:200px;
height:50px;
background-color:#ccc;
display:inline-block;
}
.box{
width:600px;
height:300px;
border:1px solid red;
display:none;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<p class="title">1</p>
<p class="title">2</p>
<p class="title">2</p>
<p style="clear:both"></p>
<div class="box" style="display:block">a</div>
<div class="box">b</div>
<div class="box">c</div>
</div>
<div class="wrap2">
<p class="title">1</p>
<p class="title">2</p>
<p class="title">2</p>
<p style="clear:both"></p>
<div class="box" style="display:block">a</div>
<div class="box">b</div>
<div class="box">c</div>
</div> <script>
$(function(){
$('.title').click(function(){
var $this=$(this);
var $pare=$this.parent();
//alert($this)
//alert($pare.find(".box").eq($this));
$pare.find(".box").eq($this.index()).show().siblings(".box").hide();
})
})
</script>
代碼思路：1，共同點有什麼？結構一樣，比如tab的切換塊和下面的顯示塊都是一樣的結構，他們下面顯示塊的下標總是與上面的下標一樣。換句話說，他們的this.index值都可以直接從上面的切換塊傳值。
2，有一個問題就是他們都是部門的代碼結構塊，怎麼能只用this.index傳遞一個下標就可以解決呢，或者會出現一個經常會出現的問題，就是一個切換，所有的tab都會切換。但是有一個不同點是什麼呢？就是他們的父親不一樣，所以這就是問題所在，我們可以用this點擊的對象找到父元素，從父元素再去找對應的顯示塊就解決了，當然還要優化，只是呈現了最簡單的代碼實現了基本效果僅供展示。