테스트 사이트 - 개발 중인 베타 버전입니다

스크립트 뷰 설정 질문 이요 채택완료

별그림 4년 전 조회 1,898

아래소스는 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개

채택된 답변
+20 포인트
4년 전

제대로 파악한게 맞는지 모르겠지만...

kinder_tab에 4번이 없으니 4번을 켜서 내용을 볼 수는 없겠네요.

그럼 kinder_view_4에 내용 보여주기 위해 추가되는(클릭 이벤트에서 추가되는) 클래스를 미리 넣어놓아주시면 최초 1회 보이게 됩니다.

이후에 탭 클릭 이벤트에는  kinder_view_4를 보이게 하는 클래스를 삭제하는 내용을 작성해주시면 될 듯합니다.

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

답변에 대한 댓글 4개

별그림
4년 전
그 내용은 알겠는데요 4번을 보이게 하려면 어떤 소스를 추가 해야 하죠 ?
서야
4년 전
kinder_view_4에 display: block; 넣어주시면 될 것 같아요.
별그림
4년 전
<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>

이렇게요 ?
서야
4년 전
css 파일이나 <style>부분이 따로 있으실 텐데, 거기에 넣어주시면 됩니다. 저 위치에 넣으려면 style="display: block" 이렇게 넣어주셔야 하고요.

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

스크립트안에서 4번을 숨겨주시면 버튼이 없기때문에 못볼거같네요

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

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

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

로그인