javascript 탭 메뉴
2022. 9. 14. 13:15ㆍJavaScript
2가지 스타일의 마크업
1.
<div class="탭1">
<h1></h1> //position으로 tab menu 위치 잡아주기
// 내용
</div>
<div class="탭2">
<h1></h1> //position으로 tab menu 위치 잡아주기
// 내용
</div>
<div class="탭3">
<h1></h1> //position으로 tab menu 위치 잡아주기
// 내용
</div>2.
<div>
h3*3>a // tab 메뉴 부분
</div>
<div>
// 탭 메뉴별 내용
</div>
<div>
// 탭 메뉴별 내용
</div>
<div>
// 탭 메뉴별 내용
</div>script 예시
<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>var cnt=$('.tabs h3').size(); //탭메뉴 개수 *** , size() 확장성
$('.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(); //모든 탭내용을 안보이게...
//$(".tabs .contlist:eq("+index+")").show(); //클릭한 해당 탭내용만 보여라
$(".tabs .contlist:eq("+index+")").fadeIn('slow');
$('.tab').css('background','red').css('color','#fff'); //모든 탭메뉴를 비활성화
$(this).css('background','green').css('color','#333'); // 클릭한 해당 탭메뉴만 활성화
});
});*{margin:0; padding:0}
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;border:1px solid #ccc; width:600px;}
.tabs a.tab {display:block; width:84px; position:absolute; text-align: center;
font-size: 16px; background: red; color: #fff; font-weight: bold;padding: 10px 0; transition: all .5s;}
.tabs a.tab1{left:0; top:0}
.tabs a.tab2{left:84px; top:0}
.tabs a.tab3{left:168px; top:0}
.tabs .contlist {margin-top:50px; display: none;
padding:15px;line-height:1.5em; background:#CCF}탭메뉴를 지도에 적용했을 때 오류
- display:none; 처리된 코드에 지도 API 를 호출할 경우 오류
- 처음 로드시 전부 보이게 한 후 scroll 이벤트나 overflow, height 값으로 가려준다
'JavaScript' 카테고리의 다른 글
| jQuery stop() 메서드 빠른클릭시 문제 (0) | 2022.09.16 |
|---|---|
| Javascript/jQuery Popup Event (0) | 2022.09.15 |
| Vanila JS Tab menu ex (0) | 2022.09.02 |
| Vanila JS class add/remove (0) | 2022.09.02 |
| Javascript event (0) | 2022.08.31 |