반응형
자바스크립트 탭메뉴
각각의 탭 영역을 클릭하면 컨텐츠가 바뀌는 자바스크립트 탭메뉴.
jquery 로 구현함
자바스크립트 탭메뉴 - javascript 영역
<script type="text/javascript">
<!--
$(function () {
tab('#tab',0);
});
function tab(e, num){
var num = num || 0;
var menu = $(e).children();
var con = $(e+'_con').children();
var select = $(menu).eq(num);
var i = num;
select.addClass('on');
con.eq(num).show();
menu.click(function(){
if(select!==null){
select.removeClass("on");
con.eq(i).hide();
}
select = $(this);
i = $(this).index();
select.addClass('on');
con.eq(i).show();
});
}
//-->
</script>
자바스크립트 탭메뉴 - CSS영역
<style type="text/css">
* { margin:0; padding:0; }
ul,li { list-style:none; }
a { text-decoration:none; color:#000; }
.tab { border:1px solid #ddd; border-left:none; background:#fff; overflow:hidden; }
.tab li { float:left; width:33.3%; border-left:1px solid #ddd; text-align:center; box-sizing:border-box; }
.tab li { display:inline-block; padding:20px; cursor:pointer; }
.tab li.on { background-color:#eee; color:#f00; }
.tab_con { clear:both; margin-top:5px; border:1px solid #ddd; }
.tab_con div { display:none; height:100px; background:#fff; line-height:100px; text-align:center; }
</style>
자바스크립트 탭메뉴 - HTML 영역
<ul class="tab" id="tab">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tab_con" id="tab_con">
<div>1st Contents</div>
<div>2nd Contents</div>
<div>3rd Contents</div>
</div>
자바스크립트 탭메뉴 - 전체코드
<!Doctype html>
<script type="text/javascript">
<!--
$(function () {
tab('#tab',0);
});
function tab(e, num){
var num = num || 0;
var menu = $(e).children();
var con = $(e+'_con').children();
var select = $(menu).eq(num);
var i = num;
select.addClass('on');
con.eq(num).show();
menu.click(function(){
if(select!==null){
select.removeClass("on");
con.eq(i).hide();
}
select = $(this);
i = $(this).index();
select.addClass('on');
con.eq(i).show();
});
}
//-->
</script>
<style type="text/css">
* { margin:0; padding:0; }
ul,li { list-style:none; }
a { text-decoration:none; color:#000; }
.tab { border:1px solid #ddd; border-left:none; background:#fff; overflow:hidden; }
.tab li { float:left; width:33.3%; border-left:1px solid #ddd; text-align:center; box-sizing:border-box; }
.tab li { display:inline-block; padding:20px; cursor:pointer; }
.tab li.on { background-color:#eee; color:#f00; }
.tab_con { clear:both; margin-top:5px; border:1px solid #ddd; }
.tab_con div { display:none; height:100px; background:#fff; line-height:100px; text-align:center; }
</style>
<ul class="tab" id="tab">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tab_con" id="tab_con">
<div>1st Contents</div>
<div>2nd Contents</div>
<div>3rd Contents</div>
</div>반응형
'Program > Javascript' 카테고리의 다른 글
| 카페24 쇼핑몰 카카오링크(메시지) 연동하기(상품공유하기) (0) | 2020.09.24 |
|---|---|
| [javascript]전체선택, 전체해재 자바스크립트 (0) | 2020.03.16 |
| [javascript]현재 시간 실시간으로 보여주기 (0) | 2020.02.10 |
| [홈페이지만들기]자바스크립트 세자리수 콤마 넣기 (0) | 2019.10.07 |
| [홈페이지만들기]jquery json 으로 데이터 주고받기 - javsscript curl (0) | 2019.09.26 |
댓글