jquery css 主菜单样式的跳转

页面导航:首页 > 网络编程 > JavaScript > jquery css 主菜单样式的跳转

jquery css 主菜单样式的跳转

来源: 作者: 时间:2016-02-20 09:49 【

想要实现的效果其实是挺常见的那种:网页的主菜单一开始有一种默认的样式(如A样式),当鼠标经过某一菜单项时,此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时,

想要实现的效果其实是挺常见的那种:网页的主菜单一开始有一种默认的样式(如A样式),当鼠标经过某一菜单项时,此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时,当前菜单项会套用B样式,其余菜单项会去掉B样式而套用默认的A样式。经过尝试,写出了比较简单的代码,存下来,以备后用。

 

代码:

 

 

css代码:

 

 

#menuBar
{
	clear:both;
	width:1200px;
	margin:0 auto;
	color:#efefef;
	font-family:Arial;
	font-size:18px;
}
#menuBar ul
{
	list-style:none;
	height:55px;
	margin:0px;
	padding:0px;
}

.beforeClick
{
	float:left;
	width:150px;
	text-align:center;
	line-height:55px;
	height:55px;
	background-image:url(Welcome%20to%20.org_files/20141021190636.png);
	background-repeat:repeat-x;
	margin-top:10px;
}
.beforeClick:hover
{	
	background-color:3776ab;
	border:1px solid #aaa;
	height:53px;
	line-height:53px;
	width:148px;
	background-image:none;
	cursor:pointer;
}

.clickedMenu
{
	background-color:3776ab;
	border:1px solid #aaa;
	height:53px;
	line-height:53px;
	width:148px;
	background-image:none;
	cursor:pointer;
	}

js代码:

 

 

<script>
$(function(){
	$(#menuBar ul li).each(function() {
        $(this).addClass(beforeClick); // 最开始,让所有节点都加上beforeClick样式
    });
	});
	
$(function(){
	$(#menuBar ul li).each(function(i) {
		$(this).click(function(){
			$(this).siblings(li).removeClass(clickedMenu); //让其余兄弟节点去掉clickedMenu样式,即点击后的菜单样式
			$(this).siblings(li).addClass(beforeClick); // 再让其余兄弟节点添加上点击前的样式beforeClick
			$(this).addClass(clickedMenu);// 给当前节点添加上clickedMenu样式。
			})
		});
	})
</script>

效果图:

 

1、初始状态:

\

2、鼠标经过某一菜单项时的状态:

\

3、鼠标点击某一菜单后,并且鼠标经过其它菜单项时的状态:

\

3、当再次点击其它菜单时,样式继续发生变化:

\

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<