Question

我已经查看过各种其他示例，但我仍然无法在我的引导标签中工作。我的代码如下。任何人都可以帮我一把吗？

<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

您需要更改标记：

文档：http://getbootstrap.com/javascript/#tabs

更改您的代码，为此：

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

演示 - http://www.bootply.com/unCKEJAvGD

更改你的html标记你缺少很多东西

＆＃13;

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

＆＃13;

获取选项卡以适用于BootStrap

3 个答案: