Bootstrap sidenav 选项卡内容导航无法正常工作答案

【问题标题】：Bootstrap sidenav tab content navigation not working properlyBootstrap sidenav 选项卡内容导航无法正常工作
【发布时间】：2020-05-22 00:19:46
【问题描述】：

我对网络开发还很陌生，目前正在尝试做一个网络应用程序，但停留在页面设计上。我正在尝试创建一个固定的侧面导航栏，其中的内容要显示在侧面（在拆分行的第二列中）。以下是我到目前为止设法提出的代码。

导航只能在第一次正常工作，即如果我第一次看到所需的内容正文时按顺序单击所有按钮，但我不能第二次单击链接并在侧面看到正确的相关内容。

我在这里做错了什么？请帮忙！

<div class="row">
<div class="col-2 bg-light py-0 px-1 sticky-top">

    <ul class="nav flex-column">
      <li class="nav-item text-left">
        <a class="nav-link bg-dark list-group-item text-white active" href="#h_view" data-toggle="tab"> Overview</a>
        <a class="nav-link bg-dark list-group-item text-white" href="#h_my" data-toggle="collapse">
          My History
        </a>
        <div id="h_my" class="collapse">
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </div>
      </li>
    </ul>

</div>

<div class="bg-white col-10">
  <div class="tab-content pt-2">

    <div id="h_view" class="container tab-pane active">
      This section is for History Overview
    </div>
    <div id="h_my_run" class="container tab-pane fade">
      This section is for Run History
    </div>
    <div id="h_my_data" class="container tab-pane fade">
      This section is for My Data Upload History
    </div>
    <div id="h_my_rules" class="container tab-pane fade">
      This section is for My Rules changes
    </div>

  </div>
</div>
</div>

编辑：问题似乎出在折叠菜单上，在检查元素中检查 - 单击子项（运行、数据更新、规则映射）后，无论我下一步单击何处，它们的类都永久更改为活动状态。

【问题讨论】：

刚刚通过在下面添加另一个不可折叠链接测试了另一个场景，问题只是在“我的历史”折叠项目中获取链接。如果有帮助，可以在不可折叠的项目之间完美切换。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用此示例根据需要更改设置（如果有）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap Bug Report</title>

    <!-- Bootstrap's CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/latest/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/latest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <div class="navbar navbar-light bg-faded">
      <ul class="nav navbar-nav">
        <a class="nav-item nav-link active" data-toggle="tab" href="#start">Start</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#form">Form</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#status">Status</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#reports">Reports</a>
      </ul>
    </div>

    <div class="tab-content">
      <div class="tab-pane active" id="start">1</div>
      <div class="tab-pane" id="form">2</div>
      <div class="tab-pane" id="status">3</div>
      <div class="tab-pane" id="reports">4</div>
    </div>

    <!-- jQuery and Bootstrap's JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：

感谢您的惠顾！但这并没有给我子菜单上的下拉菜单。虽然发现了问题，但我不必在列表中创建单独的 div。只需将这些下拉列表放在另一个 li 中。

【解决方案2】：

虽然发现了问题，但我不必在列表中创建单独的 div。只需将这些下拉列表放在另一个 li 中。已通过替换此位解决：

        <div id="h_my" class="collapse">
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </div>

用这个：

        <li id="items" class="collapse" aria-labelledby="c_sicr_wrapper>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </li>

【讨论】：