bootstrap 切換頁籤失效的解決方法

時間 2019-11-18

原文原文鏈接

概述

bootstrap開發標籤頁時，標籤頁顯示正常，但點擊時候對應內容區域沒有變化。css

具體症狀與解決方案

1.標籤頁UI出現，但點擊無反應，標籤頁UI並未隨點擊進行切換
先檢查bootstrap.css，jQuery.js和bootstrap.js是否有正確引入，並保證引入順序jQuery在前，bootstrap.js在後。再檢查代碼中是否有其餘報錯停止了JS。
2.標籤頁能夠隨點擊進行切換，但點擊後前面幾條內容能夠切換，但後面幾條內容切換失敗
產生緣由：
內容區域的html結構出現錯誤，在單個tab中多寫了一個div的結束標籤，使得tab-content這一div過早的關閉，剩下的tab-pan則與原來的tab-content變成了平級的關係而不是父子關係。仔細觀察，點擊以後原來應該出如今tab-content區域的內容會出如今頁面的下方是主要的特徵。html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>bootstrap頁籤切換失效</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 先引入jQuery，再引入bootstrap.js-->
    <script src="//cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .content{
            width: 60%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <ul class="nav nav-tabs" id='consume_tab'>
            <li><a href="#tab0" data-toggle="tab">頁籤0</a></li>
            <li ><a href="#tab1" data-toggle="tab">頁籤1</a></li>
            <li ><a href="#tab2" data-toggle="tab">頁籤2</a></li>
            <li ><a href="#tab3" data-toggle="tab">頁籤3</a></li>
            <li ><a href="#tab4" data-toggle="tab">頁籤4</a></li>
        </ul>
    <div class="tab-content">
        <div class="tab-pane active " id="tab0">
            <div>
                <span>頁籤0內容</span>
            </div>
        </div>
        <div class="tab-pane fade " id="tab1">
            <div>
                <span>頁籤1內容</span>
            </div>
        </div>
        <div class="tab-pane fade " id="tab2">
            <div>
                <span>頁籤2內容,多了一個結束標籤</span>
            <!-- 頁籤2內容多了一個結束標籤-->
            </div>
            </div>
        </div>
        <div class="tab-pane fade " id="tab3">
            <div>
                <span>頁籤3內容,出如今頁籤2下方</span>
            </div>
        </div>
        <div class="tab-pane fade " id="tab4">
            <div>
                <span>頁籤4內容，出如今頁籤2下方</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>