Javascript twitter引导向导活动选项卡在加载时不工作_Javascript_Jquery_Twitter Bootstrap_Twitter Bootstrap Wizard

Javascript twitter引导向导活动选项卡在加载时不工作

javascript jquery twitter-bootstrap

Javascript twitter引导向导活动选项卡在加载时不工作,javascript,jquery,twitter-bootstrap,twitter-bootstrap-wizard,Javascript,Jquery,Twitter Bootstrap,Twitter Bootstrap Wizard,我对javascript比较陌生，我正在使用一个“插件”，你可以在这里找到：当我实现这段代码时，除了页面开始时没有选择任何选项卡外，其他一切都正常工作我希望选择第一个选项卡。通读代码，下面的代码似乎就是要这样做的 this.fixNavigationButtons = function() { // Get the current active tab if(!$activeTab.length) { // Select first one

我对javascript比较陌生，我正在使用一个“插件”，你可以在这里找到：

当我实现这段代码时，除了页面开始时没有选择任何选项卡外，其他一切都正常工作

我希望选择第一个选项卡。通读代码，下面的代码似乎就是要这样做的

this.fixNavigationButtons = function() {
    // Get the current active tab
    if(!$activeTab.length) {
        // Select first one
        $navigation.find('a:first').tab('show');
        $activeTab = $navigation.find(baseItemSelector + ':first');
    }

有人熟悉这个插件吗

我使用的代码正是本页上的代码

更新：以下是我的标记代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Web Form Prototype</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="rootwizard">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                1
            </div>
            <div class="tab-pane" id="tab2">
                2
            </div>
            <div class="tab-pane" id="tab3">
                3
            </div>
            <div class="tab-pane" id="tab4">
                4
            </div>
            <div class="tab-pane" id="tab5">
                5
            </div>
            <div class="tab-pane" id="tab6">
                6
            </div>
            <div class="tab-pane" id="tab7">
                7
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>    
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

    <!--Form Wizard-->
    <script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

    <!--Interaction script-->
    <script type="text/javascript" src="js/test.js"></script>

</body>
</html>

您链接的代码不包括问题中包含的js。您可能需要查看html标记。链接的代码指向

$navigation

元素中的第一个

元素。如果没有HTML标记，就不可能确切地知道它为什么不起作用，但我猜您没有使用教程中使用的相同结构：

#rootwizard>ul>li>a

我已经按照要求在顶部发布了我的标记代码和test.js。它与示例非常相似谢谢你的输入，它引导我解决了这个问题。github中的jquery.bootstrap.wizard.js与教程中使用的不同。一旦我从教程中复制了这个按钮，它现在就可以正常工作了。但是现在“上一步”和“下一步”按钮不起作用了！X.X

$(document).ready(function() {
      $('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});