onclick으로 특정 DIV 표시

블로그에서 각 게시물에 대한 태그를 결정할 수 있습니다. 비디오, 사진, 견적 등 ... 각 태그에 div 클래스를 만든 경우onclick으로 특정 DIV 표시

어떻게 내가 온 클릭 링크를 만들 수 있습니다

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

그래서 비디오라는 것이 단지 쇼 div의의의를 클릭하고 다른 모든 사업부의의를 숨 깁니다 때?

출처

2013-08-04 Louis Dickinson

내 솔루션이 작동 했습니까 ?? 아니면 Jquery없이 Javascript에서 원합니까? – KyleK

DEMO HERE

jQuery를 사용하여

.... 당신의 HTML

<a class="filter">Video</a> 
<a class="filter">Photo</a>

을 그리고 당신의 div의에서 다음

$(document).ready(function() 
{ 
    $('.filter').click(function(e) 
    { 
     e.preventDefault(); 
     var filter = $(this).html(); 
     $('.boxes').hide(); 
     $('.'+filter).show(); 
    }); 
});

....

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

또는 당신은 할 수 데이터 속성을 사용하여 수행 TES는 더 읽기 당신의 HTML을 유지합니다 ...하지만이 너무

DEMO HERE

출처

2013-08-04 00:31:11 KyleK

그게 처음으로 tryed하지만 그저 내가 예제를 좋아할 때 마지막으로 클릭 한 필터를 숨기면 모두 다시 표시하려고 할 때 .. –

게시 한 직후에 바로 그걸 고쳤습니다 ........ 그냥 시도해보십시오. 다시.. – KyleK

나는 이것에 대한 jQuery를 사용하는 것이 좋습니다 것입니다 작동합니다. 그리고 "태그"div을 모두 과 같이 class처럼주고 특정 유형의 공백으로 구분하면 훨씬 더 좋습니다. 예 : 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 표시

답변

관련 문제