想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如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. VS里属性窗口中的生成操作释义

    生成操作:无,编译 ,内容 ,嵌入的资源... 如果是类.cs文件,就得编译之后你才能使用的.如果是txt,excel 这种文件,就属性内容或者资源文件了. 内容(Content) - 不编译该文件, ...

  2. hbase学习(一)hbase简介

    1.hadoop生态系统 2.hbase简介 非关系型数据库知识面扩展 cassandra.hbase.mongodb.redis couchdb,文件存储数据库 Neo4j非关系型图数据库 3.hb ...

  3. hdu 5895(矩阵快速幂+欧拉函数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5895 f(n)=f(n-2)+2*f(n-1) f(n)*f(n-1)=f(n-2)*f(n-1)+2 ...

  4. 简单优化:Zipalign

    Android SDK中包含一个“zipalign”的工具,它能够对打包的应用程序进行优化.在你的应用程序上运行zipalign,使得在运行时Android与应用程序间的交互更加有效率.因此,这种方式 ...

  5. 洛谷P1803凌乱的yyy 题解

    题目传送门 这道题也是贪心思想.先排序一遍(按照结束的时间排)在进行扫描,满足条件的直接保存,增加ans,最后输出即可. #include<bits/stdc++.h> using nam ...

  6. sed实践

    后来也找到一篇文章讲的很详细: http://www.cnblogs.com/ctaixw/p/5860221.html --------------------------------------- ...

  7. python和shell间变量互相传递

    Python -> shell: 参考文章 1.环境变量 import os var=123或var=’123’ os.environ[’var’]=str(var) #environ的键值必须 ...

  8. RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem)

    RSA私钥和公钥文件格式 (pkcs#1, pkcs#8, pkcs#12, pem) 2018年03月07日 11:57:22 阅读数:674 Format Name Description PKC ...

  9. LCA:倍增与tarjan

    学了好久(一两个星期)都没彻底搞懂的lca,今天总算理解了.就来和大家分享下我自己的心得 首先,如果你还不懂什么是lca,出门左转自行百度 首先讲倍增 倍增的思想很简单,首先进行预处理,用一个深搜将每 ...

  10. Python之路【第二篇】: 列表、元组、字符串、字典、集合

    本文内容: -------------------------------------- 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表(list) 序列是Pyt ...