导航栏切换jquery
style.css
@charset "utf-8"; /* CSS Document */ *{padding:0px; margin:0px;} a{color:#00007F;text-decoration:none; color:#FFF; display:block;width:150px; height:30px; text-indent:14px; } ul,li{ list-style-type:none;} ul.menu{width:150px; margin:0 auto; margin-top:40px; background:#333;border-color:#000;border-style:solid;border-width:0px 1px 1px;} ul.menu li.level1 a.current{ background:#000;} ul.menu li.level1 a{background:#333; border-bottom:1px solid #FFF;} ul.menu li.level1 ul.level2{ display:none;} ul.menu li.level1 ul.level2 li a{ background:#FFF; color:#000;}
index.html
<ul class="menu"> <li class="level1"> <a class="current" href="#">衬衫a> <ul class="level2"> <li><a href="#">短袖衬衫a>li> <li><a href="#">长袖衬衫a>li> <li><a href="#">短袖T-shirta>li> ul> li> <li class="level1"> <a href="#">卫衣a> <ul class="level2"> <li><a href="#">开襟卫衣a>li> <li><a href="#">套头卫衣a>li> <li><a href="#">运动卫衣a>li> ul> li> <li class="level1"> <a style="border-bottom:0px;" href="#">裤子a> <ul class="level2"> <li><a href="#">短裤a>li> <li><a href="#">休闲裤a>li> <li><a href="#">牛仔裤a>li> ul> li> ul>
$(".level1>a").click(function(){
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});