引导可切换选项卡不起作用答案

【问题标题】：Bootstrap toggable tabs not working引导可切换选项卡不起作用
【发布时间】：2013-07-25 22:31:59
【问题描述】：

大家下午好。已经为此工作了一周，但没有成功。这可能是一个新手 javascript 错误，但我还不知道 JS 语言，只知道 HTML+CSS。感谢您的帮助。

当我点击我的标签时，内容没有改变。这是我的代码：

 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.js"></script>

...

<div class="tabbable">
          <ul class="nav nav-tabs" >
            <li class="active"><a href="#tab1" data-toggle="tab">Hunts</a></li>
            <li><a href="#tab2" data-toggle="tab">Great Outdoors</a></li>
            <li><a href="#tab3" data-toggle="tab">Instructional</a></li>
          </ul>


        <div class="tab-content">
              <ul id="tab1" class="tab-pane active"class='videolist'>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/67860856" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/66467447" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/65989351" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/65442532" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64932895" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64120939" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64028154" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/63489842" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
                    <li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/60358260" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
              </ul>
        </div>

  <div id="tab2" class="tab-pane" >
  <p>Howdy, I'm in Section 2.</p>
  </div>
  <div id="tab3" class="tab-pane">
  <p>Howdy, I'm in Section 3.</p>
  </div>
  </div>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery", "1.7");</script>
  <script src="js/bootstrap.js"></script>
  </script>    

        </div>

【问题讨论】：

标签： javascript twitter-bootstrap tabs

【解决方案1】：

您需要将ul 包含在这些标签中，并从ul 中删除id、tab-pane 和active 类

<div id="tab1" class="tab-pane active"> 
<ul>
    <li class='videolist'>
         <iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/67860856" webkitallowfullscreen="" width="100"></iframe>
         <span class='vidtext'>ddddddddddddddddddddddd99999</span>
    </li>
</ul>
</div>

FIDDLE

【讨论】：

【解决方案2】：

以下 HTML 将导致选项卡正常工作并更改内容。

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Hunts</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Great Outdoors</a>
        </li>
        <li><a href="#tab3" data-toggle="tab">Instructional</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            <p>Howdy, I'm in Section 1.</p>
        </div>
        <div id="tab2" class="tab-pane">
            <p>Howdy, I'm in Section 2.</p>
        </div>
        <div id="tab3" class="tab-pane">
            <p>Howdy, I'm in Section 3.</p>
        </div>
    </div>
</div>

然后只需将 div 中的内容更改为您需要的任何内容。

可以在此处找到一个工作示例：http://jsfiddle.net/SOFiddles/ZcgSc/

【讨论】：