快捷導(dǎo)航

jquery tree 可編輯節(jié)點實現(xiàn)代碼(jquery一句話節(jié)點菜單)

更新時間：2009年11月02日 17:30:34 作者：

jquery tree 可編輯節(jié)點，實現(xiàn)的三級菜單實現(xiàn)代碼，這里我們將為大家準備了兩個。一個是鋒利的jquery中的一句話導(dǎo)航菜單實現(xiàn)代碼。非常不錯。

下面的代碼。大家可以研究下，對于jquery的學(xué)習(xí)還是非常有好處的。
鋒利的jquery中的一句話代碼，實現(xiàn)的菜單

運行后，需要刷新下(因為是調(diào)用的外地jquery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>1-5-1</title> <style type="text/css"> #menu {     width:300px; } .has_children{     background : #555;     color :#fff;     cursor:pointer; } .highlight{     color : #fff;     background : green; } div{     padding:0; } div a{     background : #888;     display : none;     float:left;     width:300px; } </style>    </head> <body> <div   class="ublnpf9mb"   id="menu">     <div   id="ublnpf9mb"   class="has_children">         <span>第1章-認識jQuery</span>         <a>1.1-JavaScript和JavaScript庫</a>         <a>1.2-加入jQuery</a>         <a>1.3-編寫簡單jQuery代碼</a>         <a>1.4-jQuery對象和DOM對象</a>         <a>1.5-解決jQuery和其它庫的沖突</a>         <a>1.6-jQuery開發(fā)工具和插件</a>         <a>1.7-小結(jié)</a>     </div>     <div   id="ublnpf9mb"   class="has_children">         <span>第2章-jQuery選擇器</span>         <a>2.1-jQuery選擇器是什么</a>         <a>2.2-jQuery選擇器的優(yōu)勢</a>         <a>2.3-jQuery選擇器</a>         <a>2.4-應(yīng)用jQuery改寫示例</a>         <a>2.5-選擇器中的一些注意事項</a>         <a>2.6-案例研究——類似淘寶網(wǎng)品牌列表的效果</a>         <a>2.7-還有其它選擇器么？</a>         <a>2.8-小結(jié)</a>     </div>     <div   id="ublnpf9mb"   class="has_children">         <span>第3章-jQuery中的DOM操作</span>         <a>3.1-DOM操作的分類</a>         <a>3.2-jQuery中的DOM操作</a>         <a>3.3-案例研究——某網(wǎng)站超鏈接和圖片提示效果</a>         <a>3.4-小結(jié)</a>     </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

運行后，需要刷新下(因為是調(diào)用的外地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> <title></title>  <style type="text/css"> li{ text-indent: 10px; margin-left: -20px; padding-top: 0px; list-style: none; } .oline{ background-image: url(treeview-default-line.gif); background-position: 7px 18px; background-repeat: no-repeat; } .lline{ background-image: url(L.gif); background-position: 7px 18px; background-repeat: no-repeat; } .expand{ background-image: url(minus.gif); background-repeat: no-repeat; background-position: left; } .colpse{ background-image: url(plus.gif); background-repeat: no-repeat; background-position: left; } label{ padding-left: 15px; padding-top: -5px; } .leaf{ background-image: url(L.gif); background-repeat: no-repeat; background-position: left; } input{ border: 1px solid #CCC; } </style> </head> <body> <ol> <li > <label>A</label> <ol > <li > <label>A-1</label> <ol> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> <li > <label>B-1</label> <ol> <li > <label>B-1-1</label> <ol> <li > <label>B-1-1-1</label> <ol> <li > <label>B-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: