div display :none 을 하는 방법
본문
div 영역을 5개 정도로 나누어
클릭 시 1개 영역만 보이고 다른 4개 영역은 보이지 않게 만들려고 하는데
어떻게 하면 될까요...
<code>
<div class="container text-center">
<a href="#aaa" class="btn-toggle">A부르기</a>
<br>
<a href="#bbb" class="btn-toggle">B부르기</a>
</div>
<div id="aaa">
내용aaaa
</div>
<div id="bbb">
내용bbbbb
</div>
<script>
$(function(){
$('.btn-toggle').on('click',function(){
$this = $(this);
var targetElem = $this.attr('href');
$(targetElem).toggleClass('active');
return false;
});
});
</script>
<style>
#aaa {display:none}
#aaa.active {display:block}
#bbb {display:none}
#bbb.active {display:block}
</style>
</code>
이런식으로 해보았는데 display:none 은 적용되는데 클릭 시 display:block 부분이 먹히질 않네요..
어떻게하면 해결할 수 있을까요..?
아.. 제일 처음 메인 페이지 div에는 다 숨겨놓고 클릭 할때 메인 페에지 div도 숨기고
클릭한 div를 나오게 하고 싶습니다!
답변 2
active 클래스를 별도로 사용하는 것보다는,
jquery 의 .show() (보이기) .hide() (감추기) .toggle() (보이거나 감추기) 메소드를 사용하는 것을 추천합니다.
모든 div 를 먼저 숨김처리 한 뒤, target div 를 보이기 처리하는 방법을 사용하면 어떨까 합니다.
<div class="container text-center">
<a href="#aaa" class="btn-toggle">A부르기</a>
<br>
<a href="#bbb" class="btn-toggle">B부르기</a>
</div>
<div id="aaa" class="zzz">
내용aaaa
</div>
<div id="bbb" class="zzz">
내용bbbbb
</div>
<script>
$(function(){
$('.btn-toggle').on('click',function(){
$('.zzz').hide();
var targetElem = $(this).attr('href');
$(targetElem).show();
});
});
</script>
