반응형
기본적인 홈페이지 콘텐츠중
메뉴 버튼 누를시 관련된 내용이 같은장소에서 내용만바뀌게 하는 것들이 종종있다.
다양한방법이있겠지만
내가 가장 자주쓰는 방법을 적어논다.
<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 속성으로 열고닫고~
728x90
반응형
'프로그래밍 > javascript' 카테고리의 다른 글
그누보드 리스트 체크박스 전체체크관련 (0) | 2020.09.16 |
---|---|
추가버튼으로 clone 추가하기 (0) | 2020.07.23 |
datepicker 간단 적용 (0) | 2020.07.15 |
input 배열의 모든값 합 구하기 (0) | 2020.07.10 |
카카오 지도 기본생성 (0) | 2020.07.10 |