用onclick顯示某些DIV

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

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

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

來源

2013-08-04 Louis Dickinson

我的解決方案是否工作？或者你想在沒有Jquery的Javascript中使用它？ – KyleK

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

來源

2013-08-04 00:31:11 KyleK

多數民衆贊成我是如何嘗試第一次，但就像你的例子，當我試圖再次顯示所有他們，如果仍然隱藏最後點擊的過濾器.. –

我修正了很快發佈後........試試吧再次.. – KyleK

我推薦使用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(); 
    } 
});

來源

2013-08-04 00:45:15 federicot

用onclick顯示某些DIV

回答

相關問題