Question

我对javascript相对较新，我使用的是'插件'，你可以在这里找到：

https://github.com/VinceG/twitter-bootstrap-wizard

当我实现此代码时，一切正常，除非页面启动时没有选择任何选项卡。

我希望选择第一个标签。通过代码阅读，似乎以下代码就是为了做到这一点

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');
    }

有谁熟悉这个插件？

我正在使用的代码就是这个页面上的代码 http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-pills.html

更新：这是我的标记代码：

<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>

和test.js

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

twitter-bootstrap-wizard活动选项卡无法加载

0 个答案: