Question

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

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

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

或者您可以使用数据属性来保持HTML的可读性......但这也很有效

DEMO HERE

Answer 2

我建议您使用jQuery。如果你给你所有的＃34;标签＆＃34;那会好得多。例如，div 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();
    }
});

用onclick显示某些DIV

2 个答案: