Question

js

<script type="text/javascript">
    $('.stat-wrap a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
</script>

我将正确的链接绑定到id，但是所有内容都显示出来，没有任何效果。挣扎超过1小时，但没有解决。帮助

Answer 1

以下是您的代码的工作示例：http://bootply.com/107407

data-toggle =“tab”属性需要在锚点上，而不是在div上。

  <a href="#note-tab" data-toggle="tab">
      <div class="active">
          <div class="col-md-3 stat-text-wrap active">
              <p class="stat-number-desc">PRIVATE NOTES</p>
          </div>
      </div>
  </a>

  <a href="#quotes-tab" data-toggle="tab">
      <div>
          <div class="col-md-3 stat-text-wrap">
              <p class="stat-number-desc">QUOTES</p>
          </div>
      </div>
  </a>

  <a href="#project-tab" data-toggle="tab">
      <div>
          <div class="col-md-3 stat-text-wrap">
              <p class="stat-number-desc">PROJECTS DONE</p>
          </div>
      </div>
  </a>

  <a href="#skill-tab" data-toggle="tab">
      <div>
          <div class="col-md-3 stat-text-wrap">
              <p class="stat-number-desc">NEW SKILLS</p>
          </div>
      </div>
  </a>

此外，标签内容需要包含在“tab-content”类的容器中。

<div class="tab-content">
  <div class="tab-pane active" id="note-tab">
      <input placeholder="NOTE What's on your mind?" class="status-input" type="text">
  </div>

  <div class="tab-pane" id="quotes-tab">
      <input placeholder="QUOTE What's on your mind?" class="status-input" type="text">
  </div>

  <div class="tab-pane" id="project-tab">
      <input placeholder="PROJECTWhat's on your mind?" class="status-input" type="text">
  </div>

  <div class="tab-pane" id="skill-tab">
      <input placeholder="SKILLWhat's on your mind?" class="status-input" type="text">
  </div>
</div>

Answer 2

您应该将data-toggle="tab"与锚标记一起使用，例如，<a href="#note-tab">就像这样“<a href="#note-tab" data-toggle="tab">

然后在.tab-content中整理标签内容，如下所示：

<div class="tab-content">
<div class="tab-pane active" id="note-tab">
    <input placeholder="NOTE What's on your mind?" class="status-input" type="text">
</div>

<div class="tab-pane" id="quotes-tab">
    <input placeholder="QUOTE What's on your mind?" class="status-input" type="text">
</div>

<div class="tab-pane" id="project-tab">
    <input placeholder="PROJECTWhat's on your mind?" class="status-input" type="text">
</div>

<div class="tab-pane" id="skill-tab">
    <input placeholder="SKILLWhat's on your mind?" class="status-input" type="text">
</div>

希望这有帮助。

谢谢，泽山

bootstrap选项卡没有打开点击与jquery

2 个答案: