jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼
更新時間：2017年01月23日 11:41:40 作者：yangzailu1990
這篇文章主要介紹了jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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="#">聯(lián)系</a></li>
<li><a href="#">關于</a></li>
</ul>
</body>
</html>
</body>
</html>
以上所述是小編給大家介紹的jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法
這篇文章主要介紹了jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法,結合實例形式較為詳細的分析了jQuery使用ajax提交serialize序列化后的表單數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
jQuery處理xml格式的返回數(shù)據(jù)(實例解析)
在以下示例中，我將使用$.ajax()方法，使用$.get()方法也可以，但我覺得$.ajax()更好一些，代碼更容易懂，并且也不怎么復雜2013-11-11
jQuery點擊彈出層彈出模態(tài)框點擊模態(tài)框消失代碼分享
這篇文章主要介紹了jQuery點擊彈出層，彈出模態(tài)框，點擊模態(tài)框消失的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對應地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對應地區(qū)名2009-12-12
這篇文章主要介紹了基于jQuery實現(xiàn)響應式圓形圖片輪播特效，mislider插件可以將圖片以圓形圖片顯示，然后使圖片無限循環(huán)形成輪播圖或旋轉木馬特效，感興趣的小伙伴們可以參考一下2015-11-11
用jquery實現(xiàn)的圖片圓角效果代碼。2009-05-05
這篇文章主要介紹了 jQuery Plupload上傳插件的使用詳解,需要的朋友可以參考下2017-04-04
JQuery擴展插件Validate 3通過參數(shù)設置錯誤信息
最終顯示在頁面上的錯誤分為兩種：第一種是默認錯誤信息，該信息已經(jīng)被定義在插件中了，可以手動修改。2011-09-09
本文為大家介紹下使用jquery驗證郵箱、驗證手機號碼，具體實現(xiàn)思路及代碼如下，感興趣的朋友可以學習下2013-07-07