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ように、すべての「タグ」を付けた方がはるかに良いでしょう。classtag

たとえば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();
    }
});