javascript - 使用 onclick 显示某些 DIV

Question

在博客中，您可以为每个帖子确定一个标签，例如视频、照片、报价等...如果我为每个标签创建了一个 div 类，例如

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

如何创建一个 onclick 链接，以便当我单击它时只显示名为 Video 的 div 并隐藏所有其他 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>

还有你的 div....

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