Html＆JQuery 탭메뉴(tabmenu)
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-30 17:17
조회view: 35
본문
탭메뉴(tabmenu)
css
ul.tab {display:block;width:100%;background:#111;}
ul.tab:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab li {display:block;float:left;width:25%;}
ul.tab li a {display:block;color:#fff;line-height:50px;text-align:center;background:#111;}
ul.tab li a.selected {background:#37be00}html
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
</ul>
<ul class="panel">
<li id="tab1"></li>
<li id="tab2"></li>
<li id="tab3"></li>
<li id="tab4"></li>
</ul>jQuery/Javascript
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel li").hide();
$($(this).attr("href")).show();
return false;
});