Question

我正在使用bootstrap选项卡和jQuery，但它无法正常工作。

标记

    <ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
  <div class="tab-pane" id="profile">.werewr..</div>
  <div class="tab-pane" id="messages">.jkhk..</div>
  <div class="tab-pane" id="settings">llkjlk...</div>
</div>

JS FILE

$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

Here is the jsfiddle link

Answer 1

您是否包含了Bootstrap附带的bootstrap.js（或仅tab.js-file）？只需使用Bootstrap.js（即使是JsFiddle提供的旧版2.0.2），您的小提琴也能正常工作。

<script src="bootstrap.js"></script>

请记住在jQuery之后包含此内容

http://jsfiddle.net/8zz02ve0/

Answer 2

在标记中插入以下行

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 3

你可以将你的js调整为：

$('#myTab li').click(function (e) {
    e.preventDefault();
    $('#myTab li').removeClass('active'); //remove active from all <li>
    $(this).addClass('active'); //add active class to <li> you clicked on
});

twitter-bootstrap上的标签不起作用

3 个答案:

Update Fiddle