管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery-1.3.2.min.js%22%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24(%22.has%22).click(function()%7B%20%0D%0A%24(this).addClass(%22hig%22).children(%22a%22).show().end().siblings().removeClass(%22hig%22).children(%22a%22).hide()%3B%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
<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需刷新才能执行]

教程首页更多教程