Question

以下是引导代码。我希望结果显示在单击的选项卡附近而不是结尾处。例如-如果有人单击第一行中出现的“主页”，则其内容应显示在第一行选项卡之后，而不是末尾。请让我知道您是否可以提供帮助以及是否需要任何澄清。

您还可以在Codepen here

上找到此代码

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
    <div role="tabpanel" class="tab-pane" id="5">5</div>
    <div role="tabpanel" class="tab-pane" id="6">6</div>
    <div role="tabpanel" class="tab-pane" id="7">7</div>
    <div role="tabpanel" class="tab-pane" id="8">8</div>
  </div>

</div>

Answer 1

简单地在{3}上放置.nav后跟.tab-content就可以在v3上使用，即使对于连续的对也是如此：

<ul class="nav">
 ... tab controls group 1
</ul>
<div class="tab-content">
   ... tab panels group 1
</div>
<div class="container">

<ul class="nav">
 ... tab controls group 2
</ul>
<div class="tab-content">
   ... tab panels group 2
</div>

在此处查看完整示例：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab" class="active">Home</a></li>
  <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="1">1</div>
  <div role="tabpanel" class="tab-pane" id="2">2</div>
  <div role="tabpanel" class="tab-pane" id="3">3</div>
  <div role="tabpanel" class="tab-pane" id="4">4</div>
</div>
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab" class="active">Home</a></li>
  <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="5">5</div>
  <div role="tabpanel" class="tab-pane" id="6">6</div>
  <div role="tabpanel" class="tab-pane" id="7">7</div>
  <div role="tabpanel" class="tab-pane" id="8">8</div>
</div>

但是，v4当前不支持在同一页面上具有多个选项卡容器。有a support ticket。

想要使内容显示在选项卡之间

1 个答案: