用onclick顯示某些DIV

Question

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

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

我如何創建一個onclick鏈接，所以當我點擊它時只顯示div的名為Video並隱藏所有其他div？

Answer 1

在這里演示

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

而你的divs ......

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

或者你可以使用數據屬性來實現它，以保持你的HTML更具可讀性......但這也有效

在這里演示

Answer 2

我建議使用jQuery 。 如果你給所有你的“標簽” div sa 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();
    }
});