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

原文件下载: http://download.csdn.net/detail/laoyaotask/8065707

html代码:

 <div id="menuBar">
<ul>
<li>Home</li>
<li>Download</li>
<li>Documentation</li>
<li>Community</li>
<li>Success Stories</li>
<li>News</li>
<li>Events</li>
<li>About</li>
</ul>
</div>

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%20Python.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、当再次点击其他菜单时,样式继续发生变化:

jquery css 主菜单样式的跳转的更多相关文章

  1. jquery+css实现菜单收缩效果并适应多种浏览器与移动平台

    效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...

  2. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  5. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  6. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  7. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  8. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  9. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

随机推荐

  1. Photon3Unity3D.dll 解析四——LitePeer

    LitePeer 玩家 Connect      连接服务器 Disconnect  断开与服务器的连接 OpJoin        进入游戏 OpLeave     离开游戏,但仍与服务器保持连接 ...

  2. tomcat报错HTTP Status 405 - HTTP method GET is not supported by this URL

    servlet提交表单,结果出错. 出现HTTP Status 405 - HTTP method GET is not supported by this URL 原因是:1.继承自Httpserv ...

  3. lr场景运行报错的解决方法

  4. 二十三 使用@property

    在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 这显然不合逻辑.为了限制score的范围,可以 ...

  5. Vibrator震动

    今天又学一招: Android手机中的震动由Vibrator实现.设置震动事件,需要知道其震动的时间长短.震动的周期等. 在 Android Vibrator中,震动的时间以毫秒计算(1/1000秒) ...

  6. poj1475 Pushing Boxes(BFS)

    题目链接 http://poj.org/problem?id=1475 题意 推箱子游戏.输入迷宫.箱子的位置.人的位置.目标位置,求人是否能把箱子推到目标位置,若能则输出推的最少的路径,如果有多条步 ...

  7. poj1950 Dessert(DFS)

    题目链接 http://poj.org/problem?id=1950 题意 输入一个整数n(3<=n<=15),将1,2,..n顺序排列,在数字中间插入'+','-','.',这样会产生 ...

  8. springMVC+freemarker实现自定义标签

    在开发过程中,有些需要引用到重复的页面,或者动态的数据 修改数据库是可以实现,但是太麻烦了. freemarker自定义标签在开发中用途很广,就说个入门实例吧 基于springmvc. 首先需要导入对 ...

  9. UIViewController的基本概念与生命周期

    UIViewController是iOS顶层视图的载体及控制器,用户与程序界面的交互都是由UIViewController来控制的,UIViewController管理UIView的生命周期及资源的加 ...

  10. post登录趴一趴百度贴吧美女

    本次爬取的贴吧是百度的美女吧,给广大男同胞们一些激励 在爬取之前需要在浏览器先登录百度贴吧的帐号,各位也可以在代码中使用post提交或者加入cookie 爬行地址:http://tieba.baidu ...