2010-10-14 7 views
0

j'ai besoin d'aide pour créer et actice état sur les onglets voici mon javascriptand une partie de mon html je ne peux pas sembler entrer css ici s'il vous plaît le demander si vous l'exigez je l'ai besoin quel onglet vous êtes sur il montre la même couleur que l'arrière-plan du conteneur actif sans frontières sur la jointure j'ai besoin de ceci pour les onglets supérieurs et latéraux toute aide sur comment faire ceci serait très appréciée comme ive cherché des jours pour une solution et seulement je peux trouver sont les plugins que je ne veux pas utilisernavigation à onglets avec jquery

aussi j'ai essayé de poster une image, mais je ne suis pas autorisé

script java

$(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(); 


}); 

});

haut onglets de navigation

<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> 
navigation latérale

<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> 

et 5 contenant des divs emballés dans un conteneur principal

+1

utilisation http://jqueryui.com/demos/tabs/ – lock

+0

je pense Vous devez d'abord lire le didacticiel jqueryui. Vous pouvez voir plusieurs exemples dans SO ou une question connexe. – klox

Répondre

0

fixé dès maintenant réussi à créer l'effet i étais après. après plusieurs essais et erreurs voici le code i utilisé pour chaque onglet peut-être il y a un moyen plus simple de le faire, mais cela fonctionne pour l'instant

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

}); 
Questions connexes