javascript - 为什么 Bootstrap 的选项卡不工作

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#menu2">Video</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="uploaded-image-ct">
      <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-picture"></span> Upload image
      </button>

    </div>
  </div>

  <div id="songs" class="tab-pane fade">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>
  </div>

  <div id="video" class="tab-pane fade">
    <div class="form-group">
      <input placeholder="Paste YouTube link here" type="text">
    </div>

  </div>

</div>

视频部分应该在 html 上显示 youtube 而不是在页面上。

我检查了 jquery 是否在 bootstrap.js 之前加载。但它仍然无法正常工作。原来选项卡按钮没有正常工作。虽然当你点击图像按钮图像部分将被显示。是只有输入标签的问题吗？

Answer 1

工作片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#video">Video</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="uploaded-image-ct">
      <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-picture"></span> Upload image
      </button>

    </div>
  </div>

  <div id="songs" class="tab-pane fade">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>
  </div>

  <div id="video" class="tab-pane fade">
    <div class="form-group">
      <input placeholder="Paste YouTube link here" type="text">
    </div>

  </div>

</div>

jQuery 需要在指向正确 tab-pane 的选项卡中的 anchor 标记中使用正确的 href。

您正在使用:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#menu2">Video</a>
  </li>
</ul>

您需要让 Video 的 href 指向 #video，如下所示:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#video">Video</a>
  </li>
</ul>