更好的方式來顯示/隱藏多個div？

我有8個鏈接，所有需要顯示點擊div。我只需要一次顯示一個div，因此當點擊一個新鏈接時，當前顯示的div會隱藏起來，並顯示一個新的鏈接。到目前爲止，我有一個jQuery解決方案，但它很醜陋。有沒有更容易/更正確的方法來實現我想要的？更好的方式來顯示/隱藏多個div？

<div> 
<a href="#" class="link">Click Link</a><br /> 
<a href="#" class="link2">Click Link 2</a><br /> 
<a href="#" class="link3">Click Link 3</a><br /> 
<a href="#" class="link4">Click Link 4</a><br /> 
<a href="#" class="link5">Click Link 5</a><br /> 
<a href="#" class="link6">Click Link 6</a><br /> 
<a href="#" class="link7">Click Link 7</a><br /> 
<a href="#" class="link8">Click Link 8</a><br /> 
<div class="testVid hideDiv" style="background:pink; height:200px">Test Vid Div<br /><br /><span class="close">CLOSE</span></div> 
<div class="testVid2 hideDiv" style="background:pink; height:200px">Test Vid Div 2<br /><br /><span class="close2">CLOSE 2</span></div> 
<div class="testVid3 hideDiv" style="background:pink; height:200px">Test Vid Div 3<br /><br /><span class="close3">CLOSE 3</span></div> 
<div class="testVid4 hideDiv" style="background:pink; height:200px">Test Vid Div 4<br /><br /><span class="close4">CLOSE 4</span></div> 
<div class="testVid5 hideDiv" style="background:pink; height:200px">Test Vid Div 5<br /><br /><span class="close5">CLOSE 5</span></div> 
<div class="testVid6 hideDiv" style="background:pink; height:200px">Test Vid Div 6<br /><br /><span class="close6">CLOSE 6</span></div> 
<div class="testVid7 hideDiv" style="background:pink; height:200px">Test Vid Div 7<br /><br /><span class="close7">CLOSE 7</span></div> 
<div class="testVid8 hideDiv" style="background:pink; height:200px">Test Vid Div 8<br /><br /><span class="close8">CLOSE 8</span></div> 

$(document).ready(function(){ 
    $("a.link").click(function(){ 
     $(".testVid").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close").click(function(){ 
     $(".testVid").hide(); 
     }); 

    $("a.link2").click(function(){ 
     $(".testVid2").show(); 
     $(".testVid").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close2").click(function(){ 
     $(".testVid2").hide(); 
     }); 

    $("a.link3").click(function(){ 
     $(".testVid3").show(); 
     $(".testVid2").hide(); 
     $(".testVid").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close3").click(function(){ 
     $(".testVid3").hide(); 
     }); 

    $("a.link4").click(function(){ 
     $(".testVid4").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close4").click(function(){ 
     $(".testVid4").hide(); 
     }); 

    $("a.link5").click(function(){ 
     $(".testVid5").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close5").click(function(){ 
     $(".testVid5").hide(); 
     }) 

    ;$("a.link6").click(function(){ 
     $(".testVid6").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close6").click(function(){ 
     $(".testVid6").hide(); 
     }); 

    $("a.link7").click(function(){ 
     $(".testVid7").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close7").click(function(){ 
     $(".testVid7").hide(); 
     }); 

    $("a.link8").click(function(){ 
     $(".testVid8").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid").hide(); 
    }); 
    $(".close8").click(function(){ 
     $(".testVid8").hide(); 
     }); 
    $(".hideDiv").css('display', 'none'); 
});

Fiddle Here

來源

2011-07-28 ComatoseDuck

利用jQuery選擇器。我將所有的類屬性都改爲了ID屬性，並且我在沒有數字的情況下附加了1。這是小提琴。

http://jsfiddle.net/BLXWS/7/

來源

2011-07-28 16:17:33

美麗。你會介意向我解釋什麼是'a [id^=「link」]和'var vid_id = $（this）.attr（「id」）。replace（「link」，「#testVid」）;'mean so我可以有更好的理解？ – ComatoseDuck

Ofcourse。 'a [id^=「link」]'是一個jQuery選擇器，它基本上過濾掉所有具有以'link'開頭的ID屬性的'a'標籤。在下一行中，我得到鏈接點擊的ID屬性，可以說'link2'，將該ID轉換爲相應的testVid，我只是用'＃testVid'替換鏈接，現在它變成'＃testVid2'並且我可以相應地隱藏/顯示它。在使用選擇器時，我喜歡使用ID屬性，因爲通常情況下，您將不僅需要使用一個類。 –

分配的所有項的公共類
一次$(".commonClass").click(..)
在功能隱藏所有附加一個單擊處理所有（與相同的選擇），僅顯示當前$(this)

來源

2011-07-28 15:58:32 Bozho

每個div應該h一個班級和一個ID。這個類應該用來對你擁有的div的類型進行分組。該id應該對每個div都是唯一的。

所以，如果您有包含汽車和一些含有松鼠的照片的照片一些div，你應該有兩個類的div

<div class="PhotosCars" id="Car1"></div> 
<div class="PhotosCars" id="Car2"></div> 
<div class="PhotosCars" id="Car3"></div> 
<div class="PhotosSquirrels" id="Squirrels1"></div> 
<div class="PhotosSquirrels" id="Squirrels2"></div> 
<div class="PhotosSquirrels" id="Squirrels3"></div> 

// hide squirrels 
$(".PhotosSquirrels").hide(); 

// hide cars 
$(".PhotosCars").hide(); 

// show single photo 
$("#Car3").show();

來源

2011-07-28 16:01:17

謝謝！我正要打出正確答案的示例*（這是這個問題的缺失）。現在我可以去工作，賺錢養活我的家人。 – Malvolio

@Malvolio - 好點和LOL！刪除了我的低級答案。 – karim79

如果我的答案正確並且對您有所幫助，請選中該框。 jQuery真棒。在我的網站上查看jQuery示例下的新QR碼生成器。 http://www.evikjames.com/ –

我已經updated your fiddle與普通類的鏈接和的div，並使用ID更改編號（因爲無論如何它們都是唯一的）。你可以這樣做：

$(".showlink").click(function(e){ 
    e.preventDefault(); 
    $(".testVid").hide() 
    $("#vid"+$(this).attr("id").replace("link","")).show();  
});

來源

2011-07-28 16:09:59 Litek

您提供的解決方案和更新的小提琴不起作用 – ComatoseDuck

對不起。忘了'preventDefault（）'。編輯並更新小提琴。 – Litek

解決方案，而在你的HTML改變任何東西：

$("a").click(function(){ 
    $('div[class^="testVid"]').hide(); 
    $('div[class="testVid'+ $(this).attr('class').replace(/link/, '') +'"]').show(); 
}); 

$('span[class^="close"]').click(function() { 
    $(this).parent().hide(); 
});

我建議你把麪糊看看jQuery Selectors，那些可以挽救你的生命。

來源

2011-07-28 16:24:12

太糟糕了，我不能接受2個答案。我一定會選擇選擇器！ – ComatoseDuck

使用您想要連接/處理的元素的屬性/值有共同之處。

在你的情況你的鏈接和div的涉及一起是它們的類名稱的一部分（鏈接數和格數;它們內部a和div類名link1 --> testVid1隱藏）。

這也是你的鏈接關係在一起（在這種情況下，你把重點放在他們的類名的第一部分）。所以，你不需要點擊功能爲他們每個人都只是一個：

// this selector selects all a tags of which class attribute contains value of "link" 
$('a[class*="link"]')

同去的是關閉的div跨度：

$('span[class*="close"]')

所以你的JavaScript/jQuery代碼（沒有必要變化的html代碼）看起來是這樣的：

$(function() { 
    $('a[class*="link"]').click(function(e){ 
     // prevent default behaviour of anchor tag 
     e.preventDefault(); 
     //reset current selection (hide all divs) 
     $('div[class*="testVid"]').hide(); 
     // get clicked anchor tag number 
     $this = ($(this).attr("class")).replace("link", "testVid"); 
     // find and display div that is related to clicked a element 
     $('.'+$this).show(); 
    }); 

    $('span[class*="close"]').click(function(e){ 
     // prevent default behaviour of anchor element 
     e.preventDefault(); 
     //get parent element of clicked anchor element and hide it 
     $(this).parent('div').hide(); 
    }); 

    });

正是在你們這樣jQuery是非常有用，尤其是selectors案件。

來源

2011-07-28 16:49:50 Janez

更好的方式來顯示/隱藏多個div？

回答

相關問題