为什么没有引导工作的选项卡

Question

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

视频部分应该显示youtube哪个在html上但不在页面上。

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

Answer 1

您的视频广告具有以下内容：

  <li><a data-toggle="pill" href="#menu2">Video</a>

但您尝试将其链接到的标签的ID为：

<div id="video" class="tab-pane fade">

您需要将药丸更改为相同的ID

 <li><a data-toggle="pill" href="#video">Video</a>

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

工作片段：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jQuery需要在标签中指向正确href的锚标记中的正确tab-pane。

您正在使用：

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

您需要将href点Video指向#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>