silbings 아오
탭 제이쿼리 새로 짜는데 이상하게 siblings 쓴 라인이 들어가면 동작이 안 돼서 왜 그런가 하고 이리 뒤적 저리 뒤적 10분 정도 헤매다가 빡쳐서(ㅡㅡ;;) 아씨 안해! 그러는데 떡하니 보이는 오타...
siblings 를 silbings 라고 써놓고... 동작 안한다고...
제이쿼리 후지다고...
크롬 꼴았다고...
남의 탓을 한 제 자신을 급반성해봅니다.
스크립트 필요하신 분 계시면 사용하세요. ^^;;
더 다듬어 주셔도 좋구요... ㅎㅎㅎ
<style>
.ms-tab {position:relative}
.ms-tab-tit a {border:1px solid #dce5ef}
.ms-tab-item {display:none;position:absolute;border:1px solid #dce5ef}
.ms-tab-on {display:block;background:#fff}
</style>
<div class="ms-tab">
<h2 class="ms-tab-tit ms-tab-on"><a href="#none" class="ms-tab-tit-a">TAB01</a></h2>
<div class="ms-tab-item ms-tab-on">
1
</div>
<h2 class="ms-tab-tit"><a href="#none" class="ms-tab-tit-a">TAB02</a></h2>
<div class="ms-tab-item">
2
</div>
<h2 class="ms-tab-tit"><a href="#none" class="ms-tab-tit-a">TAB03</a></h2>
<div class="ms-tab-item">
2
</div>
<h2 class="ms-tab-tit"><a href="#none" class="ms-tab-tit-a">TAB04</a></h2>
<div class="ms-tab-item">
2
</div>
<h2 class="ms-tab-tit"><a href="#none" class="ms-tab-tit-a">TAB05</a></h2>
<div class="ms-tab-item">
2
</div>
</div>
<script>
$(function(){
var $ms_tab_tit = $(".ms-tab-tit");
$ms_tab_tit.bind("mouseover focusin", function(){
var $this = $(this);
$this.siblings(".ms-tab-on").removeClass("ms-tab-on");
$this.addClass("ms-tab-on");
$this.next(".ms-tab-item").addClass("ms-tab-on");
});
});
</script>
탭 이름을 이미지로 쓰고 싶다면
http://minsup.kr/bbs/board.php?bo_table=study01&wr_id=6 을 참조... (여기에 관련내용 계속 업데이트) ^^;;
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 14개
저기다 아이디나 클래스 조금만 붙이면 쓰고 싶은 데로 쓸 수 있어서 내심 굉장히 만족하고 있는 중입니다. ㅎㅎㅎ
(BY 뭘 아는 게 있어야2)
아닌가...흠.