jQuery點擊導航欄選中更換樣式的實現代碼
更新時間:2017年01月23日 11:41:40 作者:yangzailu1990
這篇文章主要介紹了jQuery點擊導航欄選中更換樣式的實現代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<!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="#">首頁</a></li> <li><a href="#">列表</a></li> <li><a href="#">內容</a></li> <li><a href="#">聯系</a></li> <li><a href="#">關于</a></li> </ul> </body> </html> </body> </html>
以上所述是小編給大家介紹的jQuery點擊導航欄選中更換樣式的實現代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
jQuery中對未來的元素綁定事件用bind、live or on
這篇文章主要介紹了jQuery中對未來的元素綁定事件用bind、live or on,需要的朋友可以參考下2014-04-04jQuery Mobile和HTML5開發(fā)App推廣注冊頁
jQuery Mobile和HTML5的組合可以直接開發(fā)web版的app,下面通過本教程給大家分享jQuery Mobile和HTML5開發(fā)App推廣注冊頁的實例代碼,感興趣的朋友參考下吧2016-11-11jquery+ajax實現省市區(qū)三級聯動效果簡單示例
這篇文章主要介紹了jquery+ajax實現省市區(qū)三級聯動效果,結合實例形式分析了jQuery結合ajax實現省市區(qū)三級聯動功能的具體步驟與相關操作技巧,需要的朋友可以參考下2017-01-01