时间戳

首页 > 解决方案 > 想让内容出现在标签之间

jquery - 想让内容出现在标签之间

问题描述

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

您还可以在此处的 codepen 上找到此代码

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

标签： jqueryhtmltwitter-bootstraptwitter-bootstrap-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 目前不支持在同一页面上拥有多个选项卡容器。有一张支持票。

推荐阅读