I am currently working on implementing a page navigation feature in HTML using the Bootstrap List-group class.
Here is how the feature should function:
Clicking on Home
should display only link 1
, and clicking further on Link 1
should show only Page 1
.
In a similar fashion, selecting Profile
should reveal only link 2
, then clicking on Link 2
should display Page 2
.
The links are functioning correctly and displaying the appropriate items.
The issue I'm facing is that both Link 1
and Link 2
are appearing simultaneously when either the Home
or Profile
link is clicked.
Thank you for your help!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c18021a021e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="list-group" id="list-tab" role="tablist">
<a id="list-home-page" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
Link 1
</a>
<a id="list-profile-page" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
Link 2
</a>
</div>
</div>
</div>
</div>
<br><br>
<div class="tab-content" id="nav-tabPage">
<div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
Page 1
</div>
<div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="bb">
Page 2
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5a4058405c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>