div display :none 을 하는 방법 채택완료

qwebvq 7년 전 조회 3,406

div 영역을 5개 정도로 나누어

클릭 시 1개 영역만 보이고 다른 4개 영역은 보이지 않게 만들려고 하는데

어떻게 하면 될까요...







A부르기




B부르기





 내용aaaa





 내용bbbbb

이런식으로 해보았는데 display:none 은 적용되는데 클릭 시 display:block 부분이 먹히질 않네요..

어떻게하면 해결할 수 있을까요..?

아.. 제일 처음 메인 페이지 div에는 다 숨겨놓고 클릭 할때 메인 페에지 div도 숨기고

클릭한 div를 나오게 하고 싶습니다!

#php #div #display

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

트샷

7년 전

active 클래스를 별도로 사용하는 것보다는,

jquery 의 .show() (보이기) .hide() (감추기) .toggle() (보이거나 감추기) 메소드를 사용하는 것을 추천합니다.

모든 div 를 먼저 숨김처리 한 뒤, target div 를 보이기 처리하는 방법을 사용하면 어떨까 합니다.

</p>

<p><div class="container text-center">

    <a href="#aaa" class="btn-toggle">A부르기</a>

    


    <a href="#bbb" class="btn-toggle">B부르기</a>

</div></p>

<p><div id="aaa" class="zzz">

 내용aaaa

</div></p>

<p><div id="bbb" class="zzz">

 내용bbbbb

</div></p>

<p>

<script>

$(function(){

        $('.btn-toggle').on('click',function(){

             $('.zzz').hide();

             var targetElem = $(this).attr('href');

             $(targetElem).show();

        });

});

</script></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

janedoe

7년 전

http://api.jquery.com/toggleclass/#toggleClass1" target="_blank">http://api.jquery.com/toggleclass/#toggleClass1 참고해보세요 .

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

div display :none 을 하는 방법 채택완료

답변 2개

공유하기