스크립트 뷰 설정 질문 이요
본문
아래소스는 1번을 누르면 1번 내용이 보이고
2번을 누르면 2번 내용이 보이고
3번을 누르면 3번 내용이 보이는데
처음에 들어오면 4번 내용이 보이고 1 ,2 , 3번
클릭하면 1 2, 3번 내용만 보익도 4번 내용은 딱 한번만 보이게 할수는 없나요 ?
처음 접속 했을때 한번만 보이게요
<div class="content_area kinder clearfix">
<div class="kinder_img">
<img src="<?=G5_THEME_URL?>/img/s2_2_img5.jpg">
</div>
<div class="kinder_wrap">
<div class="txt"><span class="fc_pointer">초등과정</div>
<div class="kinder_tab">
<div rel="kinder_view_1"><span>1</span></div>
<div rel="kinder_view_2"><span>2</span></div>
<div rel="kinder_view_3"><span>3</span></div>
</div>
</div>
</div>
<div class="kinder_type2 kinder_view_1 kinder_type_in">
<div class="box">
<div class="title">
1번
</div>
<div class="txt lead">
<img src="<?=G5_THEME_URL?>/img/s2_2_img2.png" alt=""><br><br>
1번 내용
</div>
</div>
</div>
<div class="kinder_type2 kinder_view_2 kinder_type_in" >
<div class="box">
<div class="title">
2번
</div>
<div class="txt lead">
<img src="<?=G5_THEME_URL?>/img/s2_2_img3.png" alt=""><br><br>
2번 내용
<br><br>
</div>
</div>
</div>
<div class="kinder_type2 kinder_view_3 kinder_type_in">
<div class="box">
<div class="title">
3번
</div>
<div class="txt lead">
<img src="<?=G5_THEME_URL?>/img/s2_2_img4.png" alt=""><br><br>
3번내
</div>
</div>
</div>
<div class="kinder_type2 kinder_view_4 kinder_type_in">
<div class="box">
<div class="title">
4번
</div>
<div class="txt lead">
<img src="<?=G5_THEME_URL?>/img/s2_2_img5.png" alt=""><br><br>
4번내용
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.kinder_tab div').click(function(){
var tid= $(this).attr("rel");
$("."+tid).removeClass('kinder_type_in');
$(".kinder_type_in").slideUp();
$("."+tid).slideDown();
$("."+tid).addClass('kinder_type_in');
$(".kinder_tab div").removeClass("on");
$(this).toggleClass('on');
});
</script>
답변 2
제대로 파악한게 맞는지 모르겠지만...
kinder_tab에 4번이 없으니 4번을 켜서 내용을 볼 수는 없겠네요.
그럼 kinder_view_4에 내용 보여주기 위해 추가되는(클릭 이벤트에서 추가되는) 클래스를 미리 넣어놓아주시면 최초 1회 보이게 됩니다.
이후에 탭 클릭 이벤트에는 kinder_view_4를 보이게 하는 클래스를 삭제하는 내용을 작성해주시면 될 듯합니다.
그 내용은 알겠는데요 4번을 보이게 하려면 어떤 소스를 추가 해야 하죠 ?
kinder_view_4에 display: block; 넣어주시면 될 것 같아요.
<div class="kinder_type2 kinder_view_4 kinder_type_in" display: block; >
<div class="box">
<div class="title">
4번
</div>
<div class="txt lead">
<img src="<?=G5_THEME_URL?>/img/s2_2_img5.png" alt=""><br><br>
4번내용
</div>
</div>
</div>
이렇게요 ?
css 파일이나 <style>부분이 따로 있으실 텐데, 거기에 넣어주시면 됩니다. 저 위치에 넣으려면 style="display: block" 이렇게 넣어주셔야 하고요.
스크립트안에서 4번을 숨겨주시면 버튼이 없기때문에 못볼거같네요