CODEWITHSUNDEEP
htmltwitter-bootstrap
user1869816
user1869816

Reputation: 11

Bootstrap toggleable tag

I am a newbies to bootstrap. I have tried to play with the code to make a page with toggleable tag. However, I have checked my code for many times but I still can't find the problem in my code. Would anyone help me, please?

<div class="row">

  <div class="tabbable">

    <ul class="nav nav-tabs" id="tabs" data-tabs="tabs">
      <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li>
      <li><a href="#having_b" data-toggle="tab">Having b</a></li>
      <li><a href="#having_c" data-toggle="tab">Having c</a></li>
    </ul>

  <!-- content of the tab -->
    <div class="tab-content" id="tab-content">

      <div class="tab-pane active" id="having_a">
        <p>a</p>
      </div>

      <div class="tab-pane" id="having_b">
        <p>b</p>
      </div>

      <div class="tab-pane" id="having_c">
        <p>c</p>
      </div>

    </div>

  </div>

  <script type="text/javascript">
     jQuery(document).ready(function ($) {$('#tabs').tab(); });
  </script>    

  </div>     

  <hr>

  <footer>
    <p>&copy;2012</p>
  </footer>

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>

Upvotes: 1

Views: 134

Answers (1)

Huei Tan
Huei Tan

Reputation: 2315

You don't have include a function in

  1. id="myTab"
  2. insert $.tab('show')

for example

   <ul class="nav nav-tabs id="myTab">
      <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li>
      <li><a href="#having_b" data-toggle="tab">Having b</a></li>
      <li><a href="#having_c" data-toggle="tab">Having c</a></li>
    </ul>

<script>
  $(function () {
    $('#myTab').tab('show');
  })
</script>

http://twitter.github.com/bootstrap/javascript.html#tabs

Upvotes: 1

Related Questions