Question

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

导航仅在第一次时效果良好，即，如果我第一次依次单击所有按钮，则会看到所需的内容主体，但是我无法第二次单击链接并在侧面看到正确的相关内容。

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

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

编辑：问题似乎在于折叠菜单，在检查元素中检查了-单击子项（运行，数据更新，规则映射）后，其类将永久更改为活动状态，而与我接下来单击何处无关。

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

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

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

2 个答案: