javascript/jquery簡寫代碼和活動函數

Question

我有這個代碼，我想知道是否有一個更短的寫作方式？

也是其中的代碼做我需要做

得益於積極的標籤保持活躍在相關的div時

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

給每個這些div的另一個類：

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

然後：

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

Answer 2

它看起來像你試圖做的是顯示一個div並隱藏其他元素時點擊其他元素  —例如，一個選項卡式界面。

簡單的方法是使用某人已經爲您建造的東西，如jQuery UI's tabs。

但是，您也可以輕鬆地將div顯示/隱藏（面板）和您點擊的div（標籤），方法是給它們一些共同的信息。舉例來說，如果你把識別它們屬於標籤面板的屬性，這得到了很多短：

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

...作品，如果你把一個data-panel屬性是一致的標籤和麪板上都。 Live example

但是，如果您運行沒有JavaScript的活動示例，請注意它如何不降級。這就是爲什麼你通常會看到這個列表和導航錨，如完成，像這樣：

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

有了這個代碼：

$("#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