Bootstrap 3導航選項卡在單擊時不會更改

Question

因此，我剛剛在Bootstrap中啟動了一個新站點，並且正在研究nav-tabs設計。 我按照發球區域的指示進行操作，在這一點上幾乎已經復制並粘貼了，只是為了使其起作用，但是but，我遇到了幾個問題：

（1）導航選項卡在單擊時不會更改，即URL更改為我的元素ID，但實際的選項卡未變為“活動”狀態（主頁保持按下狀態，而其他按鈕保持按下狀態）

（2）tab-content div僅顯示由class =“ active”標記的內容。

我已經包含了必要的jquery和bootstrap js腳本，並且我相信它們的順序正確，但是無論我做什么，這些選項卡都不會將其活動狀態切換為被單擊的狀態。

這是我的html：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>

<body>
    <div class="nav">
         <div class="container">
        <div class="tabbable">
    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#about">About</a></li>
    <li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
    <li><a data-toggle="tab" href="#search">Search</a></li>
    <li><a data-toggle="tab" href="#logout">Logout</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="home">
        <h1>Hospital Data Solutions</h1>
        <p>Financial Analysis Database</p>
    </div>
    <div class="tab-pane" id="about">
        <h1>About Us</h1>
        <p>Cost Reports and Financial Analysis Nationwide Database</p>
    </div>
    <div class="tab-pane" id="subscribe">
        <h1>Annual Subscription</h1>
        <p>Purchase an annual subscription to access all cost reports.</p>
    <h2>Individual Cost Reports</h2>
    <p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
    </div>
    <div class="tab-pane" id="search">
        <h1>Search our database</h1>
        <p>Search content goes here.</p>
    </div>
    <div class="tab-pane" id="logout">
        <h1>logout</h1>
        <p>Logout fx goes here.</p>
    </div>
            </div>
        </div>  
    </div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>

我嘗試了各種解決方案，包括添加

   <script>
    $(document).ready(function () {

            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                e.relatedTarget // previous tab
            });
        });
</script>

在bootstrap.min.js腳本下面，但是就像我說的，我所做的任何事情都沒有產生任何變化。 其他所有內容在頁面上看起來都不錯，但是這里的一些指導確實可以使我從右腳開始。 我使用引導程序已經有幾個小時了，所以請原諒我的無知。 文檔說，使用數據切換時，引導程序甚至不需要JavaScript來切換選項卡，因此我對正確答案的理解非常困惑。

：EDIT：第一個答案是正確的。 將標簽直接放在結束body標簽之前並不能改善功能，但可以用替換我的腳本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                e.relatedTarget // previous tab
            });
        });
</script>

確實有效。 我最初的jquery和bootstrap文件在正確的位置，但似乎它們在某些方面沒有完全起作用/損壞。 再次感謝！

順便說一句：我是否能夠不斷鏈接到這些存儲庫，或者當引導程序/ jquery的新更新發布時我是否必須更新頁面？ 我要問的是這些存儲庫將被刪除嗎？

Answer 1

這些選項卡工作正常，如下所示： https : //jsfiddle.net/AndrewL32/nh6ma48r/

<script type="text/javascript">
    $(document).ready(function () {

            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                e.relatedTarget // previous tab
            });
        });
</script>

您需要保留bootstrap.js以及上面的腳本，該腳本在<head></head>部分的上方但在jQuery的下方調用該函數。

另外，請更換您的：

<script src="bootstrap.js"></script>與此<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

和你的

<script src="jQuery"></script>與此<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

（問題可能是因為您的js文件已被編輯，移動或丟失）

Answer 2

我唯一能想到的（但是通常會導致此問題的原因）是您的<link>和<script>標記位置錯誤。 將您的代碼復制到我的編輯器中，並在</body>標記之前添加jquery.min.js和bootstrap.min.js使其對我來說很好用。 這是HTML文件：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <title>New Homepage w/ Bootstrap</title>
    </head>

    <body>
        <div class="nav">
            <div class="container">
                <div class="tabbable">
                    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
                        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                        <li><a data-toggle="tab" href="#about">About</a></li>
                        <li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
                        <li><a data-toggle="tab" href="#search">Search</a></li>
                        <li><a data-toggle="tab" href="#logout">Logout</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">
                            <h1>Hospital Data Solutions</h1>
                            <p>Financial Analysis Database</p>
                        </div>
                        <div class="tab-pane" id="about">
                            <h1>About Us</h1>
                            <p>Cost Reports and Financial Analysis Nationwide Database</p>
                        </div>
                        <div class="tab-pane" id="subscribe">
                            <h1>Annual Subscription</h1>
                            <p>Purchase an annual subscription to access all cost reports.</p>
                            <h2>Individual Cost Reports</h2>
                            <p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
                        </div>
                        <div class="tab-pane" id="search">
                            <h1>Search our database</h1>
                            <p>Search content goes here.</p>
                        </div>
                        <div class="tab-pane" id="logout">
                            <h1>logout</h1>
                            <p>Logout fx goes here.</p>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
        <script src=".../jquery.min.js" type="text/javascript"></script>
        <script src=".../bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>

注意：將.../替換為bootstrap.min.css ， jquery.min.js和bootstrap.min.js的正確URL。 希望有幫助！

Bootstrap 3導航選項卡在單擊時不會更改

問題描述

2 個解決方案

解決方案1
0 2015-03-10 20:37:33

解決方案2
0 2015-03-10 20:37:41

Bootstrap 3導航選項卡在單擊時不會更改

問題描述

2 個解決方案

解決方案1 0 2015-03-10 20:37:33

解決方案2 0 2015-03-10 20:37:41

解決方案1
0 2015-03-10 20:37:33

解決方案2
0 2015-03-10 20:37:41