jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
廢話(huà)不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <body> <style> *{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;} *a { text-decoration:none; color:#FFF;} ul { width:800px; height:30px; background-color:#C33;} ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;} ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;} .first { background-color:#0000FF;} ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;} </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function (){ $("li").each(function(index){ $(this).click(function(){ $("li").removeClass("first"); $("li").eq(index).addClass("first"); }); }); }); </script> </head> <body> <ul> <li class="first"><a href="#">首頁(yè)</a></li> <li><a href="#">列表</a></li> <li><a href="#">內(nèi)容</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">關(guān)于</a></li> </ul> </body> </html> </body> </html>
以上所述是小編給大家介紹的jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 用jquery的方法制作一個(gè)簡(jiǎn)單的導(dǎo)航欄
- Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
- jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開(kāi)列表內(nèi)容的導(dǎo)航欄效果
- jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
- jQuery Mobile 導(dǎo)航欄代碼
- jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
相關(guān)文章
jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on
這篇文章主要介紹了jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on,需要的朋友可以參考下2014-04-04jQuery基于正則表達(dá)式的表單驗(yàn)證功能示例
這篇文章主要介紹了jQuery基于正則表達(dá)式的表單驗(yàn)證功能,包括針對(duì)字符串、郵件、網(wǎng)址、電話(huà)等常見(jiàn)正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01jquery得到font-size屬性值實(shí)現(xiàn)代碼
font-size屬性想必大家并不陌生吧,此屬性控制字體的大小,在本文將為大家介紹下如何使用jquery獲取font-size屬性值,感興趣的朋友可以參考下2013-09-09jQuery Mobile和HTML5開(kāi)發(fā)App推廣注冊(cè)頁(yè)
jQuery Mobile和HTML5的組合可以直接開(kāi)發(fā)web版的app,下面通過(guò)本教程給大家分享jQuery Mobile和HTML5開(kāi)發(fā)App推廣注冊(cè)頁(yè)的實(shí)例代碼,感興趣的朋友參考下吧2016-11-11JQuery操作tr和td內(nèi)容的方法實(shí)例
本文介紹了“JQuery操作tr和td內(nèi)容的方法實(shí)例”,需要的朋友可以參考一下2013-03-03基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果,結(jié)合實(shí)例形式分析了jQuery結(jié)合ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01