javascript - Twitter Bootstrap nav-tab not loading by default - Stack Overflow

admin管理员组

文章数量:1291455

I have created a nav-tab with Bootstrap however, the first tab does not auto-load until other tabs are clicked. After other tabs are clicked the first tab can be used.

Here is the fiddle: /

Basically, once the script loads, the Delete nav-tab is not showing the Delete Button. Its only when I click either the Promote or Revert nav-tabs that the Delete nav-tab bees active and loads.

      <!-- Body content -->
  <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
     <li class="active"><a href="#1" data-toggle="tab">Delete File</a></li>
     <li><a href="#2" data-toggle="tab">Promote</a></li>
     <li><a href="#3" data-toggle="tab">Revert</a></li>
  </ul>

  <br>
     <form class="form-inline tab-pane" id="1">
     <input class="btn btn-primary" id="deleteFileButton" type="button" value="Delete File" />
     </form>

         <form class="form-inline tab-pane" id="2">
    <input class="btn btn-primary" id="promoteManifestButton" type="button" value="Promote" />
     </form>

     <form class="form-inline tab-pane" id="3">
    <input class="btn btn-primary" id="revertButton" type="button" value="Revert Release" />
     </form>
</div>

I have created a nav-tab with Bootstrap however, the first tab does not auto-load until other tabs are clicked. After other tabs are clicked the first tab can be used.

Here is the fiddle: http://jsfiddle/GGMWX/416/

Basically, once the script loads, the Delete nav-tab is not showing the Delete Button. Its only when I click either the Promote or Revert nav-tabs that the Delete nav-tab bees active and loads.

      <!-- Body content -->
  <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
     <li class="active"><a href="#1" data-toggle="tab">Delete File</a></li>
     <li><a href="#2" data-toggle="tab">Promote</a></li>
     <li><a href="#3" data-toggle="tab">Revert</a></li>
  </ul>

  <br>
     <form class="form-inline tab-pane" id="1">
     <input class="btn btn-primary" id="deleteFileButton" type="button" value="Delete File" />
     </form>

         <form class="form-inline tab-pane" id="2">
    <input class="btn btn-primary" id="promoteManifestButton" type="button" value="Promote" />
     </form>

     <form class="form-inline tab-pane" id="3">
    <input class="btn btn-primary" id="revertButton" type="button" value="Revert Release" />
     </form>
</div>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Aug 1, 2013 at 0:12 rmoh21 asked Aug 1, 2013 at 0:07 rmoh21rmoh21 1,52566 gold badges1919 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You need to set your tab-pane to active by default as well as the li:

<form class="form-inline tab-pane active" id="1">

本文标签： javascriptTwitter Bootstrap navtab not loading by defaultStack Overflow