jquery - bootstrap 选项卡不会打开 jquery 点击

Question

http://bootply.com/107403

js

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

我已经将正确的链接绑定(bind)到 id，但是一切都显示出来了，没有任何效果。挣扎了1个多小时没解决。帮助。

Answer 1

这是您的代码的一个工作示例:http://bootply.com/107407

data-toggle="tab"属性需要在 anchor 上，而不是在 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>