您的位置:首页 > Web前端 > JQuery

导航栏切换jquery

2013-10-03 19:49 681 查看
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-shirt</a></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;
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: