Getting Tabs to work for BootStrap

Question

I've looked through various other examples, but I still can't seem to my bootstrap tabs to work. My code is below. Can anyone lend me a hand?

<body>
    <ul class="nav nav-tabs" id = "myTab">
        <li class = "active"><a href= "home" data-toggle="tab">Home</a></li>
        <li><a data-target="About" data-toggle="tab">About</a></li>
        <li><a data-target="Events" data-toggle="tab">Events</a></li>
        <li><a data-target="LargeGroups" data-toggle="tab">Large Groups</a></li>
        <li><a data-target="SmallGroups" data-toggle="tab">Small Groups</a></li>
        <li><a data-target="Admin" data-toggle="tab">Admin</a></li>
    </ul>

    <div tab-content>
        <div class= "tab-pane active" id="About" >
          <p>And this is the about tab.</p>
        </div>

        <div id="Events" class="tab-pane">
          <p>And this is the photo tab.</p>
        </div>

        <div id="LargeGroups" class="tab-pane">
          <p>This is the Large Groups tab.</p>
        </div>

        <div id="SmallGroups" class="tab-pane">
          <p>Hi, this is the small groups tab.</p>
        </div>  

   </div><!-- /.tab-content -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>

Answer 1

You need change markup:

documentation: http://getbootstrap.com/javascript/#tabs

change your code, for this:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head> 
<body>

   <div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTab">
      <li role="presentation"><a href="#About" aria-controls="settings" role="tab" data-toggle="tab">About</a></li>
      <li role="presentation"><a href="#Events" aria-controls="settings" role="tab" data-toggle="tab">Events</a></li>
      <li role="presentation"><a href="#LargeGroups" aria-controls="settings" role="tab" data-toggle="tab">Large Groups</a></li>
      <li role="presentation"><a href="#SmallGroups" aria-controls="settings" role="tab" data-toggle="tab">Small Groups</a></li>
      <li role="presentation"><a href="#Admin" aria-controls="settings" role="tab" data-toggle="tab">Admin</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class= "tab-pane active" id="About" >
        <p>And this is the about tab.</p>
      </div>

      <div id="Events" class="tab-pane">
        <p>And this is the photo tab.</p>
      </div>

      <div id="LargeGroups" class="tab-pane">
        <p>This is the Large Groups tab.</p>
      </div>

      <div id="SmallGroups" class="tab-pane">
        <p>Hi, this is the small groups tab.</p>
      </div>
    </div>
  </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
      })
    </script>
</body>
</html>

Answer 2

不使用javascript http://jsfiddle.net/t88n213w/

<li><a href="#About" data-toggle="tab">About</a></li>

Answer 3

demo - http://www.bootply.com/unCKEJAvGD

change your html markup you are missing many things

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras</div> <div role="tabpanel" class="tab-pane" id="profile">nec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue vel</div> <div role="tabpanel" class="tab-pane" id="messages">s varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur u</div> <div role="tabpanel" class="tab-pane" id="settings">us eget condimentum rhoncus, sem quam semper libero, sit ame</div> </div> </div>

Getting Tabs to work for BootStrap

Question

3 answers

solution1
2 2014-11-29 04:47:09

solution2
1 2014-11-29 05:05:29

solution3
0 2014-11-29 05:02:37

Getting Tabs to work for BootStrap

Question

3 answers

solution1 2 2014-11-29 04:47:09

solution2 1 2014-11-29 05:05:29

solution3 0 2014-11-29 05:02:37

solution1
2 2014-11-29 04:47:09

solution2
1 2014-11-29 05:05:29

solution3
0 2014-11-29 05:02:37