html
※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다.
<div class="tabmenu"> <h2>첫번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">1 제목이 나오는부분.....</a></li> <li><a href="#">2 제목이 나오는부분.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">5무우우우우우우우ㄴ.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">요농이 요느마</a></li> <li><a href="#">요농이 요느마</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> </ul> </div>
css
<style> .tabmenu {position:relative; width:400px; height:200px; font-family:dotum,"",verdana;line-height:17px;font-size:12px;color:#555;} .tabmenu img {border:none;vertical-align:top;} .tabmenu ul {margin:0px;padding:0px;list-style:none;margin-top: 15px;} .tabmenu ul li {float:left} .tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:60px } .tabmenu .morebtn {position:absolute;right:0;top:30px;} </style>
javascript (설명은 주석으로 대체함)
<script> $(document).ready(function(){ $(".tabmenu").each(function(){ var tab = $(this).children("ul"); var tabBtn = tab.children("li").children("a"); var content = tabBtn.nextAll(); // 탭버튼을 클릭했을때 tabBtn.click(function(){ // 이미 on 상태면 pass if( $(this).hasClass("on") ) return; // 모든 컨텐츠 부분을 안보이게 한뒤 content.hide(); // 클릭한 tab 버튼(a태그) 옆의 모든 태그들은 보이도록 $(this).nextAll().show(); // 모든탭 버튼에 있던 on 클래스를 빼고 // 현재 클릭한 탭메뉴 버튼에 on 클래스 추가 tabBtn.removeClass("on"); $(this).addClass("on"); // 탭버튼를 쭉 돌면서 on 클래스가 있는 버튼만 on 이미지로 바꾸고 // 나머지 버튼들은 off 이미지로 바꾼다. tabBtn.each(function(){ var src; var img = $(this).children("img"); if( $(this).hasClass("on") ){ src = img.attr("src").replace("_off.", "_on."); }else{ src = img.attr("src").replace("_on.", "_off."); } img.attr("src", src); }); }); // 맨첫번째 탭버튼 클릭처리 tabBtn.eq(0).click(); }); }); </script>
※ 요렇게 tabmenu 클래스만 지정해서 똑같은 html 구조면 동시에 여러게 탭메뉴를 맹글수 있다.
<div class="tabmenu"> <h2>첫번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">1제목이 나오는부분.....</a></li> <li><a href="#">2제목이 나오는부분.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">5무우우우우우우우ㄴ.....</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">요농이 요느마</a></li> <li><a href="#">요농이 요느마</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p> </li> </ul> </div> <div class="tabmenu"> <h2>두번째 탭메뉴</h2> <ul> <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a> <ul class="tabcontent"> <li><a href="#">제목이 나오는부분.....</a></li> <li><a href="#">제목이 나오는부분.....</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a> <ul class="tabcontent"> <li><a href="#">무우우우우우우우.....</a></li> <li><a href="#">무우우우우우우우ㄴ.....</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> </li> <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a> <ul class="tabcontent"> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li> </ul> </li> </ul> </div>