Question

我有一个常规Twitter Bootstrap 3标签。我想要做的是控制是用一个tab-content元素来控制多个nav-tabs容器。

以下是一个示例：jsfiddle

在此示例中，当我更改标签时，只更改了第一个标签。我希望两个容器都能改变，而不仅仅是第一个。

谢谢！

Answer 1

我在此更新您的jsfiddle

我将数据目标属性添加到a-elements并更改第二个标签内容中的ID

我修改了这一行，

此致：

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

我的更新：

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a>  </li>

第二个标签内容，你的：

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

我的更新：

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2.</p>
    </div>
</div>

Answer 2

你应该只使用一个类。我刚刚在模态窗口中处理Bootstrap 3选项卡式内容。试图让模态窗口打开正确的选项卡，但我需要打开两个标签，一个用于模态标题，一个用于内容，页脚中有额外的标签。

我使用了一个课程并且有效。因此，将<div class="tab-pane fade in active" id="home">更改为<div class="tab-pane fade in active home">，将<a href="#home" data-toggle="tab">更改为<a href=".home" data-toggle="tab"> ...为我工作。

Answer 3

ID必须是唯一的。

读 Two HTML elements with same id attribute: How bad is it really?

您的代码存在问题

id为home，profile和myTabContent的两个元素。

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

<hr>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

和你给的是href="#home"，它将以id为目标第一个元素。所有元素都没有id。

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">C1</a></li>
    <li><a href="#profile" data-toggle="tab">C2</a></li>
</ul>

Answer 4

“数据目标”不适用于Bootstrap4。

这是Bootstrap4版本。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="active"><a href="#home" data-toggle="tab" data-target="#home, #home_else" aria-selected="true" id="home_tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab" data-target="#profile, #profile_else" aria-selected="false" id="profile_tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab" data-target="#messages, #messages_else" aria-selected="false" id="messages_tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab" data-target="#settings, #settings_else" aria-selected="false" id="settings_tab">Settings</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home" aria-labelledby="home_tab" role="tabpanel">...1</div>
    <div class="tab-pane" id="profile" aria-labelledby="profile_tab" role="tabpanel">...2</div>
    <div class="tab-pane" id="messages" aria-labelledby="messages_tab" role="tabpanel">...3</div>
    <div class="tab-pane" id="settings" aria-labelledby="settings_tab" role="tabpanel">...4</div>
  </div>
  
  <div class="tab-content">
    <div class="tab-pane active" id="home_else" aria-labelledby="home_tab">...11</div>
    <div class="tab-pane" id="profile_else" aria-labelledby="profile_tab">...22</div>
    <div class="tab-pane" id="messages_else" aria-labelledby="messages_tab">...33</div>
    <div class="tab-pane" id="settings_else" aria-labelledby="settings_tab">...44</div>
  </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      var activated_tab = e.target // activated tab
      var previous_tab = e.relatedTarget // previous tab
      if(activated_tab.id === 'home_tab') {
        $('#home_else').css('display', 'block');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'none');
      };
      if(activated_tab.id === 'profile_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'block');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'none');
      }
      if(activated_tab.id === 'messages_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'block');
        $('#settings_else').css('display', 'none');
      }
      if(activated_tab.id === 'settings_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'block');
      }
      // 処理,,,,,
    });
  </script>
  </body>
</html>

使用一个导航标签控制多个标签内容

4 个答案: