基于JQuery的Tab选项卡（实用例子)

1.引入文件

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

css文件

@charset "utf-8";
/* 通用 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0;}
fieldset, img {border: 0;}
abbr, acronym {border: 0; font-variant: normal;}
body {line-height: 1.5;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
sup, sub {font-size: 100%; vertical-align: baseline;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
:link, :visited {text-decoration: none;}
:focus {outline: 0;}
body{ font-family: 'Microsoft YaHei'; background:#ccc;}

/*tab*/
.tab{width:300px; margin:10px auto;}
.tab .tab_menu{width:100%; height:32px; border-bottom:#999 1px dotted;}
.tab .tab_menu ul li{float:left; background:#353744; height:31px; line-height:31px; font-size:14px; width:80px; color:#fff; text-align:center; margin-right:3px; cursor:pointer;}
.tab .tab_menu li.selected {color:#ffea00; transition: all 0.3s ease 0s}
.tab .tab_box{font-size:12px; line-height:24px; margin-top:1px; background:#eee; padding:5px 10px;}
.tab .tab_box .hidden{display:none;}

2.添加选项卡JS

$(function(){
     var $div_li =$("div.tab_menu ul li");
     $div_li.hover(function(){
   $(this).addClass("selected")   
       .siblings().removeClass("selected");
            var index =  $div_li.index(this); 
   $("div.tab_box > div")  
     .eq(index).show()  
     .siblings().hide();
  })
})

3.Tab结构

<div class="tab">
  <div class="tab_menu">
    <ul>
      <li class="selected">1</li>
      <li>2</li>
    </ul>
  </div>
  <div class="tab_box">
    <div>1...</div>
    <div class="hidden">2...</div>
  </div>
</div>

提示：

1.tab.js中$div_li.hover为鼠标经过事件，可更为click为鼠标点击事件
2.$(“div.tab_box > div”) 选取子节点，不选取子节点的话，如果里面还有div，会引起错误。
3.tab_menu li数量要与.tab_box > div数量对应。