개발노예 코드와 일상

기본적인 홈페이지 콘텐츠중

메뉴 버튼 누를시 관련된 내용이 같은장소에서 내용만바뀌게 하는 것들이 종종있다.

다양한방법이있겠지만

내가 가장 자주쓰는 방법을 적어논다.

<ul>
  <li class="sw_li on" data-type="0"><a href="#" class="color_gray font_16" onclick="return false;">1</a></li>
  <li class="sw_li" data-type="1"><a href="#" class="color_gray font_16" onclick="return false;">2</a></li>
  <li class="sw_li" data-type="2"><a href="#" class="color_gray font_16" onclick="return false;">3</a></li>
  <li class="sw_li last" data-type="3"><a href="#" class="color_gray font_16" onclick="return false;">4</a></li>
</ul>

        <?php
        for($t=0;$t<4;$t++){
        ?>
        <div class="sw_con sw_con_<?php echo $t?>">
            <?php echo $t?>
        </div>    
        <?
        }
        ?>

  $(".sw_li").click(function(){
    $('.sw_li').removeClass('on');
    $(this).addClass('on');
    $(".sw_con").hide();
    var type =$(this).data('type');
    $(".sw_con_"+type).fadeIn();
    return false;
});

탭있고 ~ 컨텐츠부분은 for문 돌려서 내용 넣어줄꺼고 
스크립트는 type 속성으로 열고닫고~