Хотите, чтобы содержимое отображалось между вкладками - PullRequest
Новая
       5

Хотите, чтобы содержимое отображалось между вкладками

0 голосов
/ 17 октября 2018

Ниже приведен код начальной загрузки.Я хочу, чтобы результат отображался рядом с выбранной вкладкой, а не в конце.Например: если кто-то нажимает на «Домой» в первой строке, его содержимое должно отображаться после первой строки вкладок, но не в конце.Пожалуйста, дайте мне знать, если вы можете помочь, и если требуется какое-либо разъяснение.

Вы также можете найти этот код на 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>

1 Ответ

0 голосов
/ 17 октября 2018

Простое размещение .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.Для этого есть билет поддержки .

...