Question

i need help creating and actice state on tabs here is my javascriptand part of my html i cant seem to enter css on here please request it if you require it i need it so which ever tab you are on it shows the same color as the active container background with no borders on the join i need this for the top and side tabs any help on how to do this would be much appreciated as ive looked for days for a solution and only ones i can find are plugins which i dont want to use

also i tried to post an image but im not allowed

java script

$(document).ready(function () {

$("a").click(function () {
    $(".side").show(".fastest");
});


$(".overveiw").click(function () {
    $(".hide").hide();
    $(".div1").show();
    $(".overveiw").addClass("active");

});



$(".tour").click(function () {
    $(".hide").hide();
    $(".div2").show();

});


$(".websites").click(function () {
    $(".hide").hide();
    $(".div3").show();


});


$(".faq").click(function () {
    $(".hide").hide();
    $(".div4").show();


});


$(".support").click(function () {
    $(".hide").hide();
    $(".div5").show();


});

});

top navigation tabs

  <ul>
    <li class="dealer"><a class="dealer">Manufacturer Dealer</a></li>
    <li class="lender"><a>Lender<br />&nbsp</a></li>
    <li class="developer"><a>Developer<br />&nbsp</a></li>
 </ul>

side navigation

<ul class="side">
    <li class="overveiw data-panel"><a>Overveiw</a></li>
    <li class="tour data-panel"><a>Take the tour</a></li>
    <li class="websites data-panel"><a>Example websites</a></li>
     <li class="faq data-panel"><a>FAQ</a></li>
    <li class="support data-panel"><a>Support</a></li>
  </ul>

and 5 containing divs wrapped in a main container

Was it helpful?

Solution

fixed now managed to create the effect i was after. after much trial and error here is the code i used for each tab maybe there is a simpler way to do it but this works for now

$(".tour").click(function () {
    $(".hide").hide();
    $(".div2").show();
    $(".tab").addClass("inactive");
    $(".tour").removeClass("inactive");
    $(".tour").addClass("active");

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top