Question

我有一个带有2个标签的页面。

我希望显示pills-public标签：

公共街区1

我希望显示pills-private标签：

私人区块2

私人区块1

请注意，这2个PRIVATE内容不在同一区域。

如何执行此操作？下面的代码不起作用。

<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">
<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>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVATE</a>
  </li>
</ul>
<div class="region-top">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 2</div>
  </div>
</div>
<div class="region-bottom">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">PUBLIC BLOCK 1</div>
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 1</div>
  </div>
</div>

Answer 1

您不能有多个具有相似ID的HTML元素...如果这样做，则只会选择第一个HTML元素-我们添加了自定义类pillsPrivateClass和pillsPublicClass来解决此问题； class="tab-content"只能在代码中使用一次；使用bootstrap 4（开箱即用），即使像我一样重新排列了元素之后，单击也不会切换2个选项卡..因此，我们必须使用jQuery来切换/取消切换任何其他div ...

$(document).ready(function() {
  $(".nav-link").click(function() {
    if ($(this)[0].id == 'pills-private-tab') {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) { /* */ } else {
          $(this).addClass('active');
          $(this).addClass('show');
        }
      });
      $(".pillsPublicClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    } else {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    }
  });
})

.pillsPrivateClass:not(.active) {
  display: none
}

.pillsPublicClass:not(.active) {
  display: none
}

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


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link " id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="false">PRIVATE</a>
  </li>
</ul>
<div class="tab-content">
  <div class='region-top'>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 2
    </div>
  </div>
  <div class='region-bottom'>
    <div id="pills-public" class=" tab-pane  pillsPublicClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PUBLIC BLOCK 1
      <br/>
    </div>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 1
    </div>
  </div>
</div>

如何通过单击选项卡显示2个内容？

1 个答案: