jQuery tabmenu1
2021. 12. 14. 11:45ㆍStudy/jQuery
CSS
/* CSS Document */
*{margin:0; padding:0}
body{margin: 20px;}
img{border:0; vertical-align:top}
ul,ol{list-style:none}
body{font-family:"돋움"; font-size:14px; color:#333333}
a{color: #333; text-decoration: none;}
.tabs {position:relative; width:600px; border:1px solid #ccc;}
.tabs a.tab{position:absolute; display:block; width:84px; text-align:center; font-size: 16px; background: red; color: #fff; font-weight: bold; padding: 10px 0; transition:background .3s;}
.tabs a.tab1{left:0; top:0}
.tabs a.tab2{left:84px; top:0}
.tabs a.tab3{left:168px; top:0}
.tabs .contlist{display:none; margin-top:50px; padding:15px; line-height:1.5; background:#CCF}
JS
// JavaScript Document
$(document).ready(function(){
var cnt=3; //탭메뉴 개수 ***
$('.tabs .contlist:eq(0)').show(); // 첫번째 탭 내용만 열어라
$('.tabs .tab1').css('background','green').css('color','#333'); //첫번째 탭메뉴 활성화
//자바스크립트의 상대 경로의 기준은 => 스크립트 파일을 불러들인 html파일이 저장된 경로 기준***
$('.tabs .tab').each(function (index) { // index=0 1 2
$(this).click(function(e){ // 각각의 탭메뉴를 클릭하면
e.preventDefault(); // <a> href="#" 값을 강제로 막는다
$(".tabs .contlist").hide(); // 모든 탭 내용 off
//$(this).parent().next().show();
$(".tabs .contlist:eq("+index+")").fadeIn(); // 해당 탭 내용 on
$('.tab').css('background','red').css('color','#fff'); // 모든 탭 off
$(this).css('background','green').css('color','#333'); // 해당 탭 on
});
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="tab.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="js/tab.js"></script>
</head>
<body>
<div class="tabs">
<h3><a href="#" class="tab tab1">대관절차</a></h3>
<div class="contlist">
<dl class="comment">
<dt>STEP 01 신청</dt>
<dd>신세계 문화홀은 수시 대관을 원칙으로 하고 있습니다. 유선 협의 후 대관 신청서와 공연 계획서를 이메일로 제출하여 주시기바랍니다.</dd>
<dt>STEP 02 심사</dt>
<dd>문화홀 대관 기준에 의거하여 대관의 가부를 결정하게 됩니다.</dd>
<dt>STEP 03 승인자 통보</dt>
<dd>심사 후, 대관 승인이 결정되면 개별통보 해드립니다. </dd>
<dt>STEP 04 계약</dt>
<dd>약정된 일정 안에 계약을 체결하셔야 하며, 계약 체결이 되지 않을 경우 자동으로 취소됩니다.</dd>
</dl>
</div>
<h3><a href="#" class="tab tab2">대관규정</a></h3>
<div class="contlist">
<div class="borrowWrite">
<strong>신세계백화점 문화홀 대관 규정</strong><br /><br />
제 1장 총칙<br />
제 1조 (목적)<br />
이 규정은 ㈜ 신세계백화점 부문 문화홀(이하 “문화홀” 이라 한다) 의 대관에 관하여 필요한 사항을 규정함을 목적으로 한다. <br /><br />
제 2조 (대관의 정의) <br />
① 대관이라 함은 대관자가 공연, 발표회, 행사, 녹화 등을 위하여 시설, 설비 및 부수장비를 소정의 절차를 거쳐 임차한 후, 사용하는 것을 말한다.<br />
② 대관자는 이 규정을 인정하고 당사의 대관승인을 받아 문화홀과 계약을 체결한 사람 및 단체를 말한다.<br />
③ 당사는 대관시설, 설비의 관리 유지, 입장통제, 안전관리에 대한 모든 권한을 갖는다. <br /><br />
제 3조(대관의 종류) <br />
① 대관은 수시 대관을 기본으로 하며, 관람료 징수에 따라 유료 공연 대관과 무료 공연 대관으로 나뉘며, 목적에 따라 공연 대관, 학교 발표회 대관, 문화예술 단체 및 행사 대관, 기타 대관으로 구분한다.
② 수시대관은 별도의 신청기간이나 공지를 원칙으로 하지 않고 문화홀의 임의로 신청, 승인 확정한다. <br /><br />
</div>
</div>
<h3><a href="#" class="tab tab3">신청양식</a></h3>
<div class="contlist">
<div class="comment">
<p>해당 양식을 다운로드 후, 각 점포 담당자 이메일로 보내주시기 바랍니다.</p>
<ul>
<li>대관신청서</li>
<li>공연계획서</li>
<li>Email
<ul>
<li>본점 taehee@shinsegae.com</li>
<li>죽전점 hwa1216@shinsegae.com</li>
<li>센텀시티점 hwa1216@shinsegae.com</li>
</ul>
</li>
</ul>
</div>
<div class="borrowBtn"><a href="#">신청양식 다운로드</a></div>
</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery tabmenu3 (0) | 2021.12.14 |
|---|---|
| jQuery tabmenu2 (0) | 2021.12.14 |
| jQuery main slide fade ps lr (0) | 2021.12.13 |
| jQuery main slide (0) | 2021.12.13 |
| jQuery main slide - fade (0) | 2021.12.13 |
