<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Python Home</title>
</head>
<link rel="stylesheet" type="text/css" href="files/pyCSS.css">
<script src="files/jquery-1.9.1.min.js"></script>
<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>
<body>
<div id="root">
<div id="topBar">
<ul>
<li>Python</li>
<li>PSF</li>
<li>Docs</li>
<li>PyPl</li>
<li>Jobs</li>
<li>Community</li>
</ul>
</div>
<div id="logoBar">
<div id="logo"><img src="files/python-logo.png"/></div>
<div id="searchBar">
<input id="queryKeyWds" name="queryKeyWds" type="text"/> <input id="btn" name="btn" type="button" value="GO"/></div>
</div>
<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>
<div id="mainPage"></div>
</div>
</body>
</html>
jquery css 主菜单跳转样式
3星 · 超过75%的资源 需积分: 9 105 浏览量
2014-10-21
21:37:28
上传
评论
收藏 44KB RAR 举报 
jquery css 主菜单跳转样式.rar （6个子文件） 
index.html 2KB
files 
btnBg.png 1KB python-logo.png 10KB
jquery-1.9.1.min.js 90KB 20141021190636.png 235B pyCSS.css 2KB资源评论
我是一个兵啊2014-10-21动态效果还不错，但是可以更好！
laoyaotask2014-10-24呵呵 初次尝试 多谢鼓励
