隐藏基于NavBar的元素？

Question

是否有一种方法可以基于引导NavBar选择隐藏/显示元素，而无需其他JS或jQuery？

我有一个带有（“ T1”，“ T2”，“ T3”）的NavBar。 该页面具有三个表（T1，T2，T3）。 在导航栏中按下“ T1”时，我想隐藏T2和T3等。

Answer 1

  

是否有一种方法可以基于引导NavBar选择隐藏/显示元素，而无需其他JS或jQuery ？

种类

您可以使用Bootstrap的collapse插件来模拟表格的手风琴。折叠插件通过使用一些CSS类和数据属性来显示和隐藏内容来工作。

<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Expand/collapse
</a>
<div id="collapseExample" class="collapse">
    Here's the content you want to expand/collapse.
</div>

您可以在可折叠内容上指定data-parent属性，以实现类似手风琴的行为（即，一次只能看到一个区域）。 Bootstrap的文档显示了如何使用data-parent属性创建accordion。

我在下面整理了一个片段，该片段与您在问题中所描述的相似。您还可以查看example on Codepen。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <a class="navbar-brand" href="#">Site</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" id="headingOne" href="#collapseOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">Table 1</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingTwo" href="#collapseTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">Table 2</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingThree" href="#collapseThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">Table 3</a>
      </li>
    </ul>
  </div>
</nav>

<div id="accordionExample">
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
    <h2>Table 1</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <h2>Table 2</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">More numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
    <h2>Table 3</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Even more numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

注意事项

该行为可能不完全是您想要的。如果真是这样，那么您可能不得不诉诸使用JS来解决此问题。在没有JS的情况下，肯定有other examples可以显示和隐藏内容，但是没有JS可能很难实现您想要的。