도전해BoA요~ 1탄
다음은 두가지 탭메뉴를 구현한 것입니다.
1) nav, section 은 html5 요소로 이전 버전의 div 로 호환하여 생각하셔도 무방합니다.
2) 문서구조는 필요와 의미에 맞게 최적화되어 있습니다. (아마도...☞☜)
3) 기본동작은 일반적인 탭기능과 동일합니다. (마우스클릭이벤트)
4) 문서구조를 참조하여 jquery 를 최적화 해BoA~요. 혹은 잘못된 부분을 고쳐BoA~요.
텍스트탭
<nav class="lt_nav">
<ul>
<li class="lt_nav_1" title="tab1">자유게시판<span> <a href="#">+</a></span></li>
<li>|</li>
<li class="lt_nav_1" title="tab2">유머게시판<span> <a href="#">+</a></span></li>
</ul>
</nav>
<section class="lt lt_nav_1s tab1">
<h4><span>텍스트탭1</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt lt_nav_1s tab2">
<h4><span>텍스트탭2</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<ul>
<li class="lt_nav_1" title="tab1">자유게시판<span> <a href="#">+</a></span></li>
<li>|</li>
<li class="lt_nav_1" title="tab2">유머게시판<span> <a href="#">+</a></span></li>
</ul>
</nav>
<section class="lt lt_nav_1s tab1">
<h4><span>텍스트탭1</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt lt_nav_1s tab2">
<h4><span>텍스트탭2</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
박스탭
<nav>
<ul class="lt_1">
<li title="tab3">탭3<span> <a href="#">더보기</a></span></li>
<li title="tab4">탭4<span> <a href="#">더보기</a></span></li>
<li title="tab5">탭5<span> <a href="#">더보기</a></span></li>
</ul>
</nav>
<section class="lt tab3">
<h4><span>탭3내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt tab4">
<h4><span>탭4내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt tab5">
<h4><span>탭5내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<ul class="lt_1">
<li title="tab3">탭3<span> <a href="#">더보기</a></span></li>
<li title="tab4">탭4<span> <a href="#">더보기</a></span></li>
<li title="tab5">탭5<span> <a href="#">더보기</a></span></li>
</ul>
</nav>
<section class="lt tab3">
<h4><span>탭3내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt tab4">
<h4><span>탭4내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
<section class="lt tab5">
<h4><span>탭5내용</span></h4>
<ul>
<li>·</li>
<li>title</li>
<li class="date lt_date">date</li>
</ul>
</section>
스크립트
<script>
$(document).ready(function(){
var lt = $('.lt_nav li[class*="lt_nav_"]');//텍스트탭최신글
lt.click(function(){
var lt_title = $(this).attr('title');
var lt_class = $(this).attr('class');
var lt_class_sel = lt_class.split(' ');
$('.'+lt_class_sel[0]+'s').css('display','none');
$('.'+lt_title).css('display','block');
$('.'+lt_class_sel).removeClass('c_red');
$(this).addClass('c_red');
});
var lt_1 = $('.lt_1 li');//박스탭최신글
var lt_1_sec = $('#i2 section');
lt_1.click(function(){
var lt_1_on = $(this).attr('title');
lt_1.removeClass('on');
$(this).addClass('on');
$(lt_1_sec).css('display','none');
$('.'+lt_1_on).css('display','block');
});
});
</script>
$(document).ready(function(){
var lt = $('.lt_nav li[class*="lt_nav_"]');//텍스트탭최신글
lt.click(function(){
var lt_title = $(this).attr('title');
var lt_class = $(this).attr('class');
var lt_class_sel = lt_class.split(' ');
$('.'+lt_class_sel[0]+'s').css('display','none');
$('.'+lt_title).css('display','block');
$('.'+lt_class_sel).removeClass('c_red');
$(this).addClass('c_red');
});
var lt_1 = $('.lt_1 li');//박스탭최신글
var lt_1_sec = $('#i2 section');
lt_1.click(function(){
var lt_1_on = $(this).attr('title');
lt_1.removeClass('on');
$(this).addClass('on');
$(lt_1_sec).css('display','none');
$('.'+lt_1_on).css('display','block');
});
});
</script>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌