jquery 导航设计实现代码 学习jquery的朋友可以看下
137 浏览量
2020-10-29
18:30:02
上传
评论
收藏 25KB PDF 举报
jquery 导航设计实现代码导航设计实现代码 学习学习jquery的朋友可以看下的朋友可以看下
jquery 导航设计，主要是通过jquery控制一些css样式变换。
<style type="text/css">
#menu{width:200px;}
.has{background:#00DF
AA; color:#FFFBF0;
cursor:pointer}
.hig{background:#FF5F5
5; color:#2A3F55;}
div{padding:0px;
margin:10px 0;}
div
a{background:#D41FAA;
display:none; float:left;
width:200px;}
</style>
<script
type="text/javascript"
src="http://img.jb51.net/js
lib/jquery/jquery-
1.3.2.min.js"></script>
<script
type="text/javascript">
$(document).ready(functi
on(){
$(".has").click(function(){
$(this).addClass("hig").ch
ildren("a").show().end().si
blings().removeClass("hi
g").children("a").hide();
});
});
</script>
<div id="menu">
<div class="has">
<span>第一章</span>
1.1哈哈哈哈哈哈
1.2哈哈哈哈哈哈
1.3哈哈哈哈哈哈
1.4哈哈哈哈哈哈
</div>
<div class="has">
<span>第二章</span>
2.1哈哈哈哈哈哈
2.2哈哈哈哈哈哈
2.3哈哈哈哈哈哈
2.4哈哈哈哈哈哈
</div>
<div class="has">
<span>第三章</span>
3.1哈哈哈哈哈哈
3.2哈哈哈哈哈哈
3.3哈哈哈哈哈哈
3.4哈哈哈哈哈哈
</div>
</div>
运行代码
复制代码
保存代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
资源评论
