用jquery实现一个常见多tab切换效果的html结构和js代码

tab切换在很多页面都采用到，tab能把并列的几种实物描述得更加清晰；

采用tab结构，在一个浏览器窗口能给读者全视野的阅读内容，方便用户

边阅读，边对比内容，是一个很实用的页面展示组合；

这里主要介绍tab的实现方式：

首先，html的页面内容布局；

 <ul class="historyTabs">
 <a href="[removed]void(0)" data-tab="pc" class="active"><li>标题1</li></a>
 <a href="[removed]void(0)" data-tab="android" ><li>标题2</li></a>
 <a href="[removed]void(0)" data-tab="ios" ><li>标题3</li></a>

</ul>
<div class="historyContentBox">
     <div id="pc" class="historyContent clear" style="display: block;">
   这里是对应标题1 的 tab内容
 </div>

   <div id="android" class="historyContent clear" style="display: none;">
   这里是对应标题2 的 tab内容
 </div>
 <div id="ios" class="historyContent clear" style="display: none;">
 这里是对应标题3 的 tab内容
 </div>
</div>

然后是js代码，这里用到了jquery库，记得先引入jquery；

  /*不同版本的更新记录tab切换*/

  $(document).ready(function(){
 $(".historyTabs").find("a").click( function(){
  $(this).parent().find("a").removeClass("active")
  $(this).addClass("active");
  var $target = $('#'+$(this).data("tab"));
  var H = $target.outerHeight()
  $(".historyContentBox").css({"height":H+"px"})
  $(".historyContent").slideUp( ); 
  $target.slideDown("slow"); 
 })
  })

另外 可以用下面的js 更加简便的实现，可以省掉不少id和 data属性的定义：

<script type="text/javascript">
        $(function() {
            $(".tab-box li").each(function(index) {
                $(this).mouseover(function() {
                    $("li.active").removeClass("active"); //注意这里
                    $(this).addClass("active"); //注意这里
                    $(".tab-content div.active-txt").removeClass("active-txt");
                    $(".tab-content div").eq(index).addClass("active-txt");
                });
            })
        });    </script>