jQuery+CSS實現(xiàn)簡單切換菜單示例
本文實例講述了jQuery+CSS實現(xiàn)簡單切換菜單的方法。分享給大家供大家參考,具體如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題頁</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ toggleEvent(0); var mTitle = $(".menuTitle"); mTitle.each(function(i){ $(this).click(function(){ toggleSlideEvent(i); $(this).css("border-bottom","1px #ccccff solid"); }); }); }); function toggleSlideEvent(i) { $("ul",".menu1").css("display","none"); $("ul",".menu1").eq(i).slideDown(); $(".menuTitle").each(function(){ $(this).css("border-bottom","0px #ccccff solid"); }); } function toggleEvent(i) { $("ul",".menu1").css("display","none"); $("ul",".menu1").eq(i).css("display","block"); $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid"); } </script> <style type="text/css"> .menu1 { border: 1px #CCCCFF solid; border-top: 0px; width: 160px; } .menuTitle { width: 100%; height: 26px; border-bottom: 0px #CCCCFF solid; border-top: 1px #CCCCFF solid; text-align: left; line-height: 26px; cursor: pointer; } ul { border: 0px #CCCCFF solid; width: 100%; margin-left: 0px; margin-top: 0px; } ul li { height: 36px; line-height:36px; border: 0px gray solid; margin-top: 0px; margin-left: 0px; padding-left:20px; list-style-type:none; /*background:url(images/Title.png);*/ } ul li:hover { height: 36px; line-height:36px; border: 0px gray solid; margin-top: 0px; margin-left: 0px; padding-left:20px; list-style-type:none; /*background:url(images/Title.png);*/ cursor:pointer; } </style> </head> <body> <form id="form1" runat="server"> <div class="menu1"> <div class="menuTitle"> TITLE1</div> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> <div class="menuTitle"> TITLE2</div> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> <div class="menuTitle"> TITLE3</div> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> </form> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery實現(xiàn)簡單Tab切換菜單效果
- 基于jQuery實現(xiàn)的菜單切換效果
- jQuery實現(xiàn)Tab菜單滾動切換的方法
- jQuery實現(xiàn)帶幻燈的tab滑動切換風(fēng)格菜單代碼
- 基于jQuery插件實現(xiàn)環(huán)形圖標(biāo)菜單旋轉(zhuǎn)切換特效
- jQuery實現(xiàn)菜單式圖片滑動切換
- 7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
- jQuery+CSS實現(xiàn)菜單滑動伸展收縮(仿淘寶)
- jquery+css+ul模擬列表菜單具體實現(xiàn)思路
- 純CSS打造的導(dǎo)航菜單(附j(luò)query版)
- jQuery+css實現(xiàn)的藍(lán)色水平二級導(dǎo)航菜單效果代碼
相關(guān)文章
JQuery樣式操作、click事件以及索引值-選項卡應(yīng)用示例
這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項卡應(yīng)用,結(jié)合實例形式分析了jQuery動態(tài)修改css樣式、事件響應(yīng)以及選項卡相關(guān)操作技巧,需要的朋友可以參考下2019-05-05基于jquery中children()與find()的區(qū)別介紹
本篇文章介紹了,基于jquery中children()與find()的區(qū)別,需要的朋友參考下2013-04-04jQuery lazyload 的重復(fù)加載錯誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件,原意是按需加載,當(dāng)圖片出現(xiàn)在可視區(qū)域時進(jìn)行加載,但是官方的插件經(jīng)過firebug的檢測可知,并不能節(jié)省流量開支,反而有重復(fù)加載的現(xiàn)象。2010-11-11jQuery去掉字符串起始和結(jié)尾的空格(多種方法實現(xiàn))
去掉字符串起始和結(jié)尾的空格在實際應(yīng)用中時很常見的的功能,本教程以多種方法為大家介紹下去掉空格的方法,感興趣的朋友可以參考下哈2013-04-04jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果代碼分享
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效,圖片可以自行替換,推薦給大家,有需要的小伙伴可以參考下。2015-08-08