javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. 구현방법: · 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태 · 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감 · addclass, removeclass, hide, show 메소드 이용 아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다. html css .container { width: 500px; margin: 20px auto; } .tab_title li { list-style: none; float: left; width: 100px; padding: 10px 15px; cursor: pointer; text-align: center; border: 1px solid #bebebe; } .tab_title li.on { background-color: #ffb715; font-weight: bold; } .tab_cont { clear: both; border: 1px solid #dedede; height: 130px; background-color: #cecece; } .tab_cont div { display: none; text-align: center; } .tab_cont div.on { display: block; }javascript, jQuery $(document).ready(function() { $(".tab_title li").click(function() { var idx = $(this).index(); $(".tab_title li").removeClass("on"); $(".tab_title li").eq(idx).addClass("on"); $(".tab_cont > div").hide(); $(".tab_cont > div").eq(idx).show(); }) });화면 보기(Result 클릭)여기서 잠깐! var idx = $(this).index(); 가 작동을 안할 경우가 있습니다. |
Jquery 탭메뉴 만들기 - jquery taebmenyu mandeulgi
저작권 © 2024 ko.cemle Inc.
