Question

所以我刚刚在bootstrap中创建了一个新站点，我正在开发一个nav-tabs设计。我已按照发球台的指示进行了几乎复制和粘贴，以便让它发挥作用但是我有几个问题：

（1）导航标签在点击时不会改变，即网址会更改为我的元素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脚本下面，但就像我说的那样，我所做的一切都没有产生任何改变。页面上的其他一切看起来都不错，但这里的一点指导真的会让我从右脚开始。我没有使用bootstrap超过几个小时，所以请原谅我的无知。文档说，当使用数据切换时，bootstrap甚至不需要javascript来切换标签，所以我对正确的答案很困惑。

：编辑：第一个答案是正确的。在关闭正文标记之前放置标记不会改进功能，而是用

替换我的脚本

<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文件在正确的位置，但似乎它们在某种程度上没有完全功能/破坏。再次感谢！

顺便说一下：我是否可以不断链接到这些存储库，或者当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>标签位于错误的位置。将代码复制到我的编辑器并在结束jquery.min.js标记之前添加bootstrap.min.js和</body>会使其对我起作用。这是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的正确网址。希望有所帮助！

Bootstrap 3导航标签在点击时不会改变

2 个答案: