I am currently in the process of developing a tab menu using an unordered list <ul>. The menu consists of 7 tabs, with the first tab being active by default and displayed in a specific color while the remaining 6 tabs are inactive and should be styled differently. To achieve this functionality, I have implemented a jQuery script that toggles the "active" class when a tab is clicked.
$(document).ready(function(){
$("ul#tabs li").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active");
$("ul#tab li:nth-child("+nthChild+")").addClass("active");
}
});
});
Below is my HTML code:
<html>
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/tabs.js"></script>
<style>
/* CSS styling for the tab menu */
#tab-menu ul li
{
/* Define styles here */
}
#tab-content
{
/* Define styles here */
}
/* Styling for active tab */
.active
{
/* Active tab styles go here */
}
</style>
</head>
<body>
<div id="tab-menu" class="tab-menu"><ul id="tabs">
<li class="active"><a href="#"><img src="01.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="02.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="04.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="06.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="07.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="08.png" height="70" width="50"/></a></li>
<li><a href="#"><img src="09.png" height="70" width="50"/></a></li>
</ul></div>
<div id="tab-content"></div>
</body>
</html>
While the click action to switch between tabs works correctly, I am looking for assistance in implementing the visual representation of inactive tabs in a different color. Can someone provide guidance on how to achieve this?