zousu
5/3/2014 - 7:40 AM

简单tab切换

简单tab切换

<div class="tab">
  <a href="javascript:void(0);" class="active">A标签</a>
  <a href="javascript:void(0);">B标签</a>
</div>  
<div class="tab-view">
  A内容
</div>
<div class="tab-view hidden">
  B内容
</div>

<script type="text/javascript">
  $('.tab a').each(function(index) {
    $(this).click(function(){
      $('.tab a').removeClass("active");
      $(this).addClass("active");
      $('.tab-view').hide()
      $('.tab-view').eq(index).show();
    });
  });
</script>

.hidden{
  display: none;
}
.active{
  //选中的样式  
}