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

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

正确的方式： -

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

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

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

我在野生动物园工作时也遇到同样的问题，请尝试镀铬。

使用下面提到的链接中的脚本。

<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

Bootstrap选项卡未正确激活

3 个答案: