夜丶有雪

青青子衿,悠悠我心。

jQuery实现的简单的导航栏切换

简单的导航栏切换,jQuery一行代码就可以解决了。。。

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	$(".level1 > a").click(function(){
		$(this).hasClass("current") ? //是否有选中样式
		$(this).removeClass("current").next().hide() ://有样式再次点击时候删除
		$(this).addClass("current")   //给当前元素添加"current"样式
		.next().show()                //下一个元素显示
		//父元素的兄弟元素的子元素<a>移除"current"样式
		.parent().siblings().children("a").removeClass("current")
		.next().hide();               //它们的下一个元素隐藏
		return false;
	});
});
</script>

<div>
    <ul>
        <li>
            <a href="#none">衬衫</a>
            <ul>
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li>
            <a href="#none">卫衣</a>
            <ul>
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li>
            <a href="#none">裤子</a>
            <ul>
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注