jquery 导航设计实现代码 学习jquery的朋友可以看下

<style type="text/css">
#menu{width:200px;}
.has{background:#00DFAA; color:#FFFBF0; cursor:pointer}
.hig{background:#FF5F55; 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./jslib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".has").click(function(){
$(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide();
});
});
</script>
<div id="menu">
<div class="has">
<span>第一章</span>
<a>1.1哈哈哈哈哈哈</a>
<a>1.2哈哈哈哈哈哈</a>
<a>1.3哈哈哈哈哈哈</a>
<a>1.4哈哈哈哈哈哈</a>
</div>
<div class="has">
<span>第二章</span>
<a>2.1哈哈哈哈哈哈</a>
<a>2.2哈哈哈哈哈哈</a>
<a>2.3哈哈哈哈哈哈</a>
<a>2.4哈哈哈哈哈哈</a>
</div>
<div class="has">
<span>第三章</span>
<a>3.1哈哈哈哈哈哈</a>
<a>3.2哈哈哈哈哈哈</a>
<a>3.3哈哈哈哈哈哈</a>
<a>3.4哈哈哈哈哈哈</a>
</div>
</div>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用 取消

猜你喜欢