
html代码:
- <div class="box">
- <div class="tab">
- <div class="tabNav">
- <span class="on">tab1</span>
- <span>tab2</span>
- <span>tab3</span>
- <span>tab4</span>
- <span>tab5</span>
- <span>tab6</span>
- </div>
- <div class="tabCt">
- <div class="tabCt1">1</div>
- <div class="tabCt2">2</div>
- <div class="tabCt3">3</div>
- <div class="tabCt4">4</div>
- <div class="tabCt5">5</div>
- <div class="tabCt6">6</div>
- </div>
- </div>
- </div>
- $(function(){
- $.each($('.tabNav span'),function(i,span){
- $(span).click(function(){
- $(this).addClass('on').siblings().removeClass('on');
- $('.tabCt>div').eq(i).show().siblings().hide();
- })
- })
- })