CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
saxysaint22
saxysaint22

Reputation: 1

Getting Tabs to work for BootStrap

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>

Upvotes: 0

Views: 1902

Answers (3)

pkang
pkang

Reputation: 64

Without using javascript http://jsfiddle.net/t88n213w/

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

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 0

brunocascio
brunocascio

Reputation: 1986

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>

Upvotes: 2

Related Questions