javascript/jquery sténographie et fonction active

Question

J'ai ce code je voudrais savoir s'il y a un moyen plus court de l'écrire?

aussi quel code dois-je faire un onglet actif reste actif lorsque le div concerné

grâce

$(document).ready(function() { 



$(".overveiw").click(function() { 
    $(".div1").show(); 
    $(".div2").hide(); 
    $(".div3").hide(); 
    $(".div4").hide(); 
    $(".div5").hide(); 
}); 
$(".tour").click(function() { 
    $(".div2").show(); 
    $(".div1").hide(); 
    $(".div3").hide(); 
    $(".div4").hide(); 
    $(".div5").hide(); 
}); 

$(".websites").click(function() { 
    $(".div3").show(); 
    $(".div1").hide(); 
    $(".div2").hide(); 
    $(".div4").hide(); 
    $(".div5").hide(); 
}); 

$(".faq").click(function() { 
    $(".div4").show(); 
    $(".div1").hide(); 
    $(".div3").hide(); 
    $(".div2").hide(); 
    $(".div5").hide(); 
}); 

$(".support").click(function() { 
    $(".div5").show(); 
    $(".div1").hide(); 
    $(".div3").hide(); 
    $(".div4").hide(); 
    $(".div2").hide(); 
}); 
}); 

Answer 1

Donnez à chacun de ces divs une autre classe:

<div class="div1 new_class"></div> 

Ensuite, :

$(".overveiw").click(function() { 
    $(".new_class").hide(); 
    $(".div1").show(); 
}); 

Answer 2

On dirait que ce que vous essayez de faire est d'afficher un div et de masquer un tas d'autres quand on clique sur d'autres éléments   — par exemple, une interface à onglets.

La manière la plus simple est d'utiliser quelque chose que quelqu'un a déjà construit pour vous, comme jQuery UI's tabs. Mais vous pouvez aussi facilement relier les divs à afficher/masquer (les panneaux) et les divs sur lesquels vous cliquez (les onglets) en leur donnant des informations en commun. Par exemple, si vous mettez un attribut sur les panneaux qui identifie l'onglet auquel ils appartiennent, cela devient beaucoup plus court:

$(".overview, .tour, .websites, .faq").click(function() { 
    var thisTab = $(this).attr("data-panel"); 
    var container = $("#container"); 
    container.find("div").hide(); 
    container.find("div[data-panel=" + thisTab + "]").show(); 
}); 

... fonctionne si vous mettez un attribut data-panel à la fois sur l'onglet et le panneau qui accepte . Mais si vous exécutez cet exemple en direct sans JavaScript, remarquez qu'il ne se dégrade pas correctement. Voilà pourquoi vous voyez normalement ce fait avec, comme des listes et des points d'ancrage pour la navigation, par exemple ceci:

<ul id='tabs'> 
    <li class="overview"><a href="#overview">Overview</a></li> 
    <li class="tour"><a href="#tour">Tour</a></li> 
    <li class="websites"><a href="#websites">Websites</a></li> 
    <li class="faq"><a href="#faq">FAQ</a></li> 
</div> 
<div id='container'> 
    <div id="overview">The overview panel</div> 
    <div id="tour">The tour panel</div> 
    <div id="websites">The websites panel</div> 
    <div id="faq">The FAQ panel</div> 
</div> 

Avec ce code:

$("#container div:not(#overview)").hide(); 
$("#tabs > li > a").click(function() { 
    var thisTab = this.href; 
    var index = thisTab.indexOf("#"); 
    if (index >= 0) { 
    thisTab = thisTab.substring(index + 1); 
    } 
    $("#container div").hide(); 
    $("#" + thisTab).show(); 
    return false; 
}); 

Live example