用onclick顯示某些DIV

Question

在博客中，您可以確定每個帖子的標籤，例如視頻，照片，報價等...如果我爲每個標籤創建了一個div類，例如

<div class="Video"></div> 
<div class="Photo"></div> 
<div class="Quote"></div> 

我怎樣才能創建一個鏈接的onclick所以，當我點擊它只是顯示div的所謂視頻並隱藏所有其他分區的？

Answer 1

DEMO HERE

使用jQuery ....

$(document).ready(function() 
{ 
    $('.filter').click(function(e) 
    { 
     e.preventDefault(); 
     var filter = $(this).html(); 
     $('.boxes').hide(); 
     $('.'+filter).show(); 
    }); 
}); 

在你的HTML

<a class="filter">Video</a> 
<a class="filter">Photo</a> 

和你的div

然後....

<div class="boxes Video">Blahblah</div> 
<div class="boxes Photo">Blahblah</div> 

或者你可以用數據屬性來做TES，保持你的HTML更具可讀性...但這個工程太

DEMO HERE

Answer 2

我推薦使用jQuery這一點。如果你給所有的「標籤」div s class，比如tag，並且用一個特定類型的空格分隔，那將會更好。

例如class="tag audio"。但這應該現在工作：

$('div').click(function() { 
    var tags = ['Video', 'Photo', 'Quote'], tag = $(this).attr('class'); 

    if ($.inArray(tag, tags)) { 
     $('.' + tag).show(); 
     $('div').not('.' + tag).hide(); 
    } 
});