Bootstrap sidenav tab content navigation not working properly
Question
I'm pretty new to web-development and currently trying to do a web-app but stuck at the page design. I'm trying to create a fixed side navbar with content to be displayed on side (in the second column of the splitted row). Below is the code that I've managed to come up with so far.
Navigation works fine only the first time ie if I click all the buttons sequentially the first time I see the desired content body, but I can't click on the link second time and see the correct relevant content on the side.
What am I doing wrong here? Help please!
<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>
EDIT: Problem seems to be with the collapse menu, checked in inspect element - after clicking on sub-items (Runs, Data Update, Rule Mapping), their class is changed to active permanently irrespective of where do I click next.
2 answers
solution1
0 2020-05-19 06:13:03
You can use this example to change settings according to your need, if any.
<,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>
solution2
0 2020-05-21 16:19:46
Figured out the problem though, I didn't have to create a separate div inside the list. just had to put those dropdowns inside another li. Was resolved by replacing this bit:
<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>
with this:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.