Bootstrap 选项卡未正确激活

Question

我正在尝试让我的导航标签正常工作。每当我单击不同的选项卡时，ul 部分都会正确更新为活动状态，但 <div class="tab-content"> 不会正确更新。它总是显示 1 部分。

<ul class="nav nav-tabs" data-tabs="tabs">
  <li data-toggle="tab" class="active"><a href="#1">1</a></li>
  <li data-toggle="tab"><a href="#2">2</a></li>
  <li data-toggle="tab"><a href="#3">3</a></li>
  <li data-toggle="tab"><a href="#4">4</a>
</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="1">
    <h3>1</h3>
  </div>
  <div class="tab-pane fade" id="2">
    <h3>2</h3>
  </div>
  <div class="tab-pane fade" id="3">
    <h3>3</h3>
  </div>
  <div class="tab-pane fade" id="4">
    <h3>4</h3>
  </div>
</div>

这里还有我正在使用的脚本：

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

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

如有任何帮助，我们将不胜感激。我之前在不同的网页上做过这个并且工作正常。由于某种原因，它在这里不起作用。谢谢！

编辑：我觉得我应该提到我已经尝试过使用和不使用 bootstrap.js 文件，但它不起作用。我知道我只需要 bootstrap.min.js 文件，但我想我会尝试两者看看会发生什么。

Answer 1

以下代码将有助于解决您的问题。

<ul class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#1" data-toggle="tab">1</a></li>
  <li><a href="#2" data-toggle="tab">2</a></li>
  <li><a href="#3" data-toggle="tab">3</a></li>
  <li><a href="#4" data-toggle="tab">4</a>
</li></ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="1">
    <h3>1</h3>
  </div>
  <div class="tab-pane fade" id="2">
    <h3>2</h3>
  </div>
  <div class="tab-pane fade" id="3">
    <h3>3</h3>
  </div>
  <div class="tab-pane fade" id="4">
    <h3>4</h3>
  </div>
</div>

Answer 2

我在 safari 中工作时也遇到了同样的问题，请在 chrome.

中尝试

使用下面提到的脚本link。

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

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Tab content 1</div>
    <div role="tabpanel" class="tab-pane" id="profile">Tab content 2</div>
    <div role="tabpanel" class="tab-pane" id="messages">Tab content 3</div>
    <div role="tabpanel" class="tab-pane" id="settings">Tab content 4</div>
  </div>
</div>

Reference

Answer 3

data-toggle 应该在正确的位置。

正确方法：-

<li class="active">
      <a href="#1" data-toggle="tab">1</a>
</li>

无论如何，工作 JSFiddle 在这里。

Bootstrap 选项卡未正确激活

Bootstrap Tabs not Activating Correctly

html

tabs

html-lists

twitter-bootstrap