In a row, I have 5 link items enclosed within an h4, which is then nested within an li element. The li element is finally nested within a ul, located inside a nav element.
Currently, when one of the links is clicked (thanks to a helpful example found here), the content of the divs containing images and text changes.
Additionally, I would like the clicked link to receive an "active" class, giving it white color and other specific CSS attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
The function for content swapping:
<nav id="nav2">
<ul class="tabz">
<li><h4><a href="#tabs-1" class="active">Scenario 1</a></h4></li>
<li><h4><a href="#tabs-2">Scenario 2</a></h4></li>
<li><h4><a href="#tabs-3">Scenario 3</a></h4></li>
<li><h4><a href="#tabs-4">Scenario 4</a></h4></li>
<li><h4><a href="#tabs-5">Scenario 5</a></h4></li>
</ul>
</nav>
Upon loading the page, everything appears correctly. However, when clicking on the second link, I want the "active" class to move from the first link to the second link. (The active class simply alters colors and borders.)
Thank you in advance.