디자인팁

제이쿼리로 제작 된 간단한 탭메뉴 소스

페이지 정보

작성자 duckbill 작성일16-07-08 16:45 조회5,934회 댓글0건

첨부파일

본문

제목 그대로 제이쿼리로 제작 된 탭메뉴 소스 입니다.

 

내용 복사 하시거나 첨부 파일 다운 받으셔서 사용 하시면 됩니다.

 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> new document </title>
<!-- meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> var jQ = jQuery.noConflict(); </script>
<script type="text/javascript">
jQ(document).ready(function(){
jQ(".tab").children().eq(0).children("div").css("display","inline-block");
jQ(".tab li").eq(0).addClass("on1");
//jQ(".tabs li").mouseover(function(){
//jQ(this).addClass("on");
//return false;
//});
jQ(".tab li").mouseleave(function(){
jQ(this).removeClass("on");
return false;
});
jQ(".tab li").click(function(){
jQ(".tab li").removeClass("on1");
jQ(this).addClass("on1");
});
jQ(".depth a").click(function(){
jQ(".depth").children("div").hide();
jQ(this).next("div").show();
});
});
</script>

<style type="text/css" >
* {margin:0;}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,caption,form,fieldset,legend,input,textarea,button{margin:0;padding:0;}
body,div,dl,dt,dd,h1,h2,h3,h4,form,fieldset,p,td,input{font-family: Dotum, "돋움", Gulim, "굴림", AppleGothic, sans-serif, Tahoma, Verdana;font-size:12px;line-height: 1.5; font-weight:normal;}
a {color:#444;text-decoration:none;}
a:hover{color:#006e55;text-decoration:none;}

.tab {height: 35px; position:relative;}
.tab li { float:left; width: 138px; height:33px; border: 1px #ccc solid; color: #666; font-weight:600; font-size: 14px; display:inline-block; border-right: 0; line-height: 33px; text-align: center;}
.tab li a { width: 138px; height:33px; color: #666; font-weight:600; font-size: 14px; float:left; border-right: 0; line-height: 33px; text-align: center; display:inline-block; }
.tab li.end { border-right: 1px #ccc solid;}
.tab li.on, .tab li.on1{ border: none; width: 139px; height: 35px; background:#c1c1c1; color: #fff;}
.tab li.on a, .tab li.on1 a{ color: #fff; }
.tab div {color:#666;}
.tab .depth >div{display:none; font-size:30px; width:416px; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; position:absolute; left:0; top:35px}
</style>

</head>

<body>
<ul class="tab">
<li class="depth"><a href="javascript:void(0);">Tab1</a>
<div>
1
</div>
</li>
<li class="depth"><a href="javascript:void(0);">Tab2</a>
<div>
2
</div>
</li>
<li class="depth end"><a href="javascript:void(0);">Tab3</a>
<div>
3
</div>
</li>
</ul>
</body>
</html>

 

 

댓글목록

등록된 댓글이 없습니다.