jQuery關於導航條背景切換效果實作範例_jquery

效果如下：
 

複製程式碼代碼如下：

.nav{高度:40px;寬度：100%；背景：#E6E6E6;}
.nav ul li{float: left;list -style: none;margin-right: 20px;line-height: 40px;}
.nav ul li a {文字裝飾：無；顯示：區塊；寬度：60px；文字對齊：居中；}
. onNav{字體粗細：粗體；顏色：#fff；背景：#ccc;}

頭>

;

• 首頁


• 博客


• 論壇


• 關於


• 聯絡

$(".nav ul li a").click(function(){if($(this).has(".onNav")){
$(this).addClass( "onNav") .parent("li").siblings("li").find("a").removeClass("onNav");}})
;
身體>



js部分：

複製程式碼複製程式碼

程式碼如下：

$(".nav ul li a").click(function(){if($(this).has(".onNav ")){ //找到一個標籤新增click事件，判斷是否有背景存在
$(this).addClass("onNav").parent("li").siblings("li").find(" a").removeClass("onNav");}}) // 新增類別並刪除現有的類別
;

上面是一種方法，以下是另外一種：

複製程式碼

程式碼如下：

$(".nav ul li a").click(function(){ //找到a標籤並加入click事件
var inx = $(this).parent("li").index( ) ; //定義變數inx，傳回這個元素在同儕中的索引位置
$(".nav ul li").find("a").removeClass("on_nav"); // 刪除現有的類別
$(".nav ul li").eq(inx).find("a").addClass("on_nav"); //取得點擊元素並新增類別