I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab.
I believe I may need to use some JavaScript code to address this problem, but I am unsure where to begin.
Here is the HTML code snippet:
$("h2").addClass("white");
$(document).ready(function () {
// load index page when the page loads
$("#response").html("DEFAULT");
$("#page1").click(function () {
// load home page on click
$("#response").html("<h2> Welcome </h2><p>Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. <br/> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>");
});
$("#page2").click(function () {
// load about page on click
$("#response").html("TESTING 2");
});
$("#page3").click(function () {
// load contact form onclick
$("#response").html("TESTING 3");
});
$("#page4").click(function () {
// load contact form onclick
$("#response").html("TESTING 4");
});
$("#page5").click(function () {
// load contact form onclick
$("#response").html("TESTING 5");
});
});li {
display: inline-block;
margin-right: 2px;
}
li a {
padding: 4px;
color:#0086ca;
text-decoration: none;
}
.white {
color: green;
}
.contentarea {
margin-top: 30px;
width: 100%;
padding: 40px 50px;
background-color: #0086ca;
color: white;
text-align: left;
font-size: 24px;
}
/* Code for multi-step indicator */
@media only screen and (min-width: 768px) {
/* CSS for multi-steps indicator styles */
}
/* Counter for multi-steps indicator */
.cd-multi-steps.count li {
counter-increment: steps;
}
/* Implementing active tab styling */
@media only screen and (min-width: 768px) {
/* CSS rules to style the active tab */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="cd-multi-steps text-bottom count">
<li class="current"><a href="#tabs-1" id="page1" class="tab">page 1</a>
</li>
<li><a href="#tabs-2" id="page2" class="tab">page 2</a>
</li>
<li><a href="#tabs-3" id="page3" class="tab">page 3</a>
</li>
<li><a href="#tabs-4" id="page4" class="tab">page 4</a>
</li>
<li><a href="#tabs-5" id="page5" class="tab">page 5</a>
</li>
</ul>
</nav>
<div class="contentarea" id="response"></div>I would like to know how can I differentiate the active tab from the rest?
Thank you.