快捷導(dǎo)航

jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼

更新時(shí)間：2017年01月23日 11:41:40 作者：yangzailu1990

這篇文章主要介紹了jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

廢話不多說(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)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法
這篇文章主要介紹了jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery使用ajax提交serialize序列化后的表單數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
jQuery處理xml格式的返回?cái)?shù)據(jù)(實(shí)例解析)
在以下示例中，我將使用$.ajax()方法，使用$.get()方法也可以，但我覺(jué)得$.ajax()更好一些，代碼更容易懂，并且也不怎么復(fù)雜
2013-11-11
jQuery點(diǎn)擊彈出層彈出模態(tài)框點(diǎn)擊模態(tài)框消失代碼分享
這篇文章主要介紹了jQuery點(diǎn)擊彈出層，彈出模態(tài)框，點(diǎn)擊模態(tài)框消失的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實(shí)例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
2009-12-12
基于jQuery實(shí)現(xiàn)響應(yīng)式圓形圖片輪播特效
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)響應(yīng)式圓形圖片輪播特效，mislider插件可以將圖片以圓形圖片顯示，然后使圖片無(wú)限循環(huán)形成輪播圖或旋轉(zhuǎn)木馬特效，感興趣的小伙伴們可以參考一下
2015-11-11
jquery 圓角遮罩圖片實(shí)現(xiàn)圖片圓角
用jquery實(shí)現(xiàn)的圖片圓角效果代碼。
2009-05-05
jQuery Plupload上傳插件的使用
這篇文章主要介紹了 jQuery Plupload上傳插件的使用詳解,需要的朋友可以參考下
2017-04-04
JQuery擴(kuò)展插件Validate 3通過(guò)參數(shù)設(shè)置錯(cuò)誤信息
最終顯示在頁(yè)面上的錯(cuò)誤分為兩種：第一種是默認(rèn)錯(cuò)誤信息，該信息已經(jīng)被定義在插件中了，可以手動(dòng)修改。
2011-09-09
jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下
2013-07-07