jQuery tabmenu3
2021. 12. 14. 12:09ㆍ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 {border:1px solid #ccc; width:600px;}
.tabs .tab_menu{overflow: hidden;}
.tabs .tab_menu li{float: left; margin-right: 10px;}
.tabs .tab {display:block; width:84px;text-align: center; font-size: 16px; background: red; color: #fff; font-weight: bold;padding: 10px 0; transition:background .3s;}
.tabs .contlist {display: none; padding:15px;line-height:1.5em; background:#CCF}
.tabs .contlist h3{font-size: 20px; font-weight: bold; margin-bottom: 15px;}
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').click(function(e){
e.preventDefault(); // <a> href="#" 값을 강제로 막는다
var ind = $(this).index('.tabs .tab'); // 클릭시 해당 index를 뽑아준다
//console.log(ind);
$(".tabs .contlist").hide(); //모든 탭내용을 안보이게...
$(".tabs .contlist:eq("+ind+")").fadeIn(); //클릭한 해당 탭내용만 보여라
$('.tab').css('background','red').css('color','#fff'); //모든 탭메뉴를 비활성화
$(this).css('background','green').css('color','#333'); // 클릭한 해당 탭메뉴만 활성화
});
});
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">
<ul class="tab_menu">
<li><a class="tab tab1" href="#">대관절차</a></li>
<li><a class="tab tab2" href="#">대관규정</a></li>
<li><a class="tab tab3" href="#">신청양식</a></li>
</ul>
<div class="contlist">
<h3>대관절차</h3>
<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>
<div class="contlist">
<h3>대관규정</h3>
<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>
<div class="contlist">
<h3>신청양식</h3>
<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 click pop (0) | 2021.12.14 |
|---|---|
| jQuery layer popup (0) | 2021.12.14 |
| jQuery tabmenu2 (0) | 2021.12.14 |
| jQuery tabmenu1 (0) | 2021.12.14 |
| jQuery main slide fade ps lr (0) | 2021.12.13 |
