Bootstrap sidenav 選項卡內容導航無法正常工作
[英]Bootstrap sidenav tab content navigation not working properly
問題描述
我對網絡開發很陌生，目前正在嘗試做一個網絡應用程序，但停留在頁面設計上。 我正在嘗試創建一個固定的側面導航欄，其中的內容要顯示在側面（在拆分行的第二列中）。 以下是我到目前為止設法提出的代碼。
導航只能在第一次正常工作，即如果我第一次看到所需的內容正文時按順序單擊所有按鈕，但我不能第二次單擊鏈接並在側面看到正確的相關內容。
我在這里做錯了什么？ 請幫忙！
<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>
編輯：問題似乎出在折疊菜單上，在檢查元素中檢查 - 單擊子項（運行、數據更新、規則映射）后，無論我下一步單擊何處，它們的 class 都會永久更改為活動狀態。
2 個解決方案
解決方案1
0 2020-05-19 06:13:03
您可以使用此示例根據需要更改設置（如果有）。
<,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>
解決方案2
0 2020-05-21 16:19:46
雖然發現了問題，但我不必在列表中創建單獨的 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 中的選項卡導航不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.