技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
简单的左侧菜单展示效果+jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FOO API</title>
</head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javaScript">
jQuery(function(){
$(".cur").click(function(){
$(this).addClass("highlight").find("a").slideDown(100).end().siblings().removeClass("highlight").find("a").slideUp(100);
//$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>
<style type="text/css">
#menu{width:300px;}
.cur{background: #555;color:#fff;cursor:pointer;}
.highlight{color : #fff;background : green;}
div{padding:0; margin:10px 0;}
div a{background: #888;display:none; float:left;width:300px;}
</style>
<body>
<div id="menu">
<div class="cur">
<span>第一章</span>
<a>我的菜单</a>
<a>我的菜单</a>
<a>我的菜单</a>
</div>
<div class="cur">
<span>第二章</span>
<a>我的菜单</a>
<a>我的菜单</a>
<a>我的菜单</a>
</div>
<div class="cur">
<span>第三章</span>
<a>我的菜单</a>
<a>我的菜单</a>
<a>我的菜单</a>
</div>
</div>
</body>
</html>