選項卡TAB

1、基礎信息

關鍵class名：nav

寫法：

（1）頭部選中狀態：class="active"

（2）頭部按鈕進行切換：<a>加data-toggle="tab"

（3）列表：<ul>加class="tab-content"，<li>加class="tab-pane"，若是<li>爲選中狀態的話class="active"

（4）列表切換：列表的<li>加id="a"，頭部tab加<a href="#a">

縱向顯示：不能用class="nav-stacked"，顯示會有問題

基礎HTML樣式：

<ul class="nav nav-tabs"> <!-- 頭部 -->
    <li class="active"><a href="#a" data-toggle="tab">one</a></li>
    <li><a href="#b" data-toggle="tab">two</a></li>
    <li><a href="#c" data-toggle="tab">three</a></li>
</ul>
<ul class="tab-content"> <!-- 列表 -->
    <li id="a" class="tab-pane active">aaaaaaaaaa</li>
    <li id="b" class="tab-pane">bbbbbbbbbb</li>
     <li id="c" class="tab-pane">cccccccccc</li>
</ul>

 

移動端：當分辨率小於768的時候樣式會有變化

2、頭部各類效果實現方法

一、TAB頭部爲設定寬度

默認寬度：和父元素同樣寬

方法1：給TAB頭部添加父級，給父級設定寬度

方法2：給TAB頭部標籤添加style

<ul class="nav nav-tabs" style="width:400px;">  
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

 二、各個TAB標籤寬度等分

默認：每一個tab裏的文字多寬，tab就多寬

寫法：給ul列表加nav-justified屬性

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

 三、下面的線自適應TAB選項的寬度

方法：class="nav-tabs-justified"

<ul class="nav nav-tabs nav-tabs-justified">
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

四、沒有下劃線樣式的TAB

方法：class="nav-pills"

<ul class="nav nav-pills">
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
     <li><a href="#">three</a></li>
</ul>

（1）設定寬度：設定寬度不能只加style="width:400px;"，還須要設置端點對其，class="nav-justified"

<ul class="nav nav-pills nav-justified" style="width:400px;"><!-- 設定寬度 -->
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
</ul>

（2）縱向顯示

寫法：class="nav-stacked"

<ul class="nav nav-pills nav-stacked" style="width:400px;">
    <li class="active"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

五、給TAB加下拉菜單

方法：

（1）給須要加下拉菜單的<li>加class="dropdown"

（2）下拉菜單的箭頭：在tab文字的後面加<span class="caret"></span>

（3）下拉菜單：給<a>加class="dropdown-toggle"、給下拉的<ul>加class="dropdown-menu"

（4）實現js的交互：給<a>加data-toggle="dropdown"

<li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
     <ul class="dropdown-menu">
         <li><a href="#">child1</a></li>
          <li><a href="#">child2</a></li>
      </ul>
</li>

 3、列表的樣式

一、給tab和列表設定寬度

方法：給父級設定寬度

<div style="width:400px;">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#a1" data-toggle="tab">one</a></li>
        <li><a href="#b1" data-toggle="tab">two</a></li>
        <li><a href="#c1" data-toggle="tab">three</a></li>
    </ul>
    <ul class="tab-content">
        <li id="a1" class="tab-pane active">aaaaaaaaaa</li>
        <li id="b1" class="tab-pane">bbbbbbbbbb</li>
        <li id="c1" class="tab-pane">cccccccccc</li>
    </ul>
</div>

二、給列表設定樣式

（1）給列表加圓角：四個值分別爲第一個……第四個的圓角值

.tab-content{ border-radius:0 0 5px 5px;}

三、切換方式

（1）淡入淡出

方法：

①給列表的<i>加 class="fade"爲淡入淡出的切換方式

②給列表的<i>加 class="in"爲一開始是顯示狀態

<ul class="tab-content">
    <li id="a2" class="tab-pane fade in active">aaaaaaaaaa</li>
    <li id="b2" class="tab-pane fade">bbbbbbbbbb</li>
    <li id="c2" class="tab-pane fade">cccccccccc</li>
</ul>

（2）對PC端進行鼠標移入移出的設置

寫法：利用js。給tab的<ul>加一個id。而後再寫js方法，當鼠標移入的時候顯示

<div style="width:400px;">
    <ul id="myTabs" class="nav nav-tabs">
        <li class="active"><a href="#a3" data-toggle="tab">one</a></li>
        <li><a href="#b3" data-toggle="tab">two</a></li>
        <li><a href="#c3" data-toggle="tab">three</a></li>
    </ul>
    <ul class="tab-content">
        <li id="a3" class="tab-pane active">aaaaaaaaaa</li>
        <li id="b3" class="tab-pane">bbbbbbbbbb</li>
        <li id="c3" class="tab-pane">cccccccccc</li>
    </ul>
</div>

$('#myTabs a').mouseover(function(){
    $(this).tab('show');
});

（3）下拉菜單的切換

<div style="width:400px;">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#a4" data-toggle="tab">one</a></li>
        <li><a href="#b4" data-toggle="tab">two</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#c4" data-toggle="tab">child1</a></li>
                <li><a href="#d4" data-toggle="tab">child2</a></li>
            </ul>
        </li>
    </ul>
    <ul class="tab-content">
        <li id="a4" class="tab-pane active">aaaaaaaaaa</li>
        <li id="b4" class="tab-pane">bbbbbbbbbb</li>
        <li id="c4" class="tab-pane">cccccccccc</li>
        <li id="d4" class="tab-pane">dddddddddd</li>
    </ul>
</div>