I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sections displayed below.
Apologies for the missing images in the menu items, but I hope you can still grasp the concept.
The initial content is visible, but as soon as I try to switch it, everything disappears.
$(document).ready(function() {
$('ul li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul li').removeClass('active');
$('.content').removeClass('current');
$(this).addClass('active');
$("#" + tab_id).addClass('current');
});
});/* ASIDE */
/* NAV */
aside {
float: left;
width: 30%;
}
aside nav {
text-align: center;
justify-content: center;
}
aside nav ul {
display: inline-block;
list-style: none;
padding: 0;
}
aside nav ul li {
display: inline-block;
margin: 2px 0px;
text-align: center;
font-size: 10px;
padding: 6px 6px 12px 6px;
color: black;
}
.active {
text-decoration: none;
color: black;
border-bottom: solid 1px black;
}
aside nav ul li img {
display: block;
width: 1.1rem;
height: 1.1rem;
margin: 4px auto;
}
aside div {
height: 100vh;
overflow-x: scroll;
padding: 12px;
margin-left: 2px;
}
.content {
display: none;
}
.content.current {
display: inline-block;
}
aside .content img {
width: 100%;
height: auto;
}
aside .content label {
font-size: 12px;
}
.content p {
font-size: 14px;
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="tabs" role="navigation" aria-label="menu">
<ul class="tabs">
<li tabindex="1" data-tab="tab-1"><img src="img/figures.svg" alt="figures selector">Figures</li>
<li tabindex="2" data-tab="tab-2"><img src="img/references.svg" alt="references selector">References</li>
<li tabindex="3" data-tab="tab-3"><img src="img/related.svg" alt="related selector">Related</li>
<li tabindex="4" data-tab="tab-4"><img src="img/info.svg" alt="details selector">Details</li>
</ul>
</nav>
<!-- CONTENT -->
<div id="tab-1" role="content" aria-label="figures content" class="content current">
<img src="img/figure1.jpg" alt="figure 1" id="fig1" value="fig1">
<label for="fig1">Fig. 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
<hr/>
<img src="img/figure2.png" alt="figure 2" id="fig2" value="fig2">
<label for="fig2">Fig. 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
<hr/>
<img src="img/figure3.png" alt="figure 3" id="fig3" value="fig3">
<label for="fig3">Fig. 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</label>
<hr/>
</div>
<div id="tab-2" role="content" aria-label="references content" class="content">
<h3>Lorem</h3>
<hr>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Lorem</h3>
<hr>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</aside>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/script.js"></script>