jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法

更新時間：2017年07月19日 10:39:02 作者：caozong

這篇文章主要介紹了jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法,涉及jQuery響應(yīng)鼠標事件針對頁面元素的遍歷及屬性變換相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法。分享給大家供大家參考，具體如下：

實現(xiàn)效果如下:

話不多說直接上代碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a{
      text-decoration: none;
      color: black;
    }
    #menu{
      width: 100%;
      height: 20px;
      background: gainsboro;
    }
    ul li{
      list-style: none;
      float: left;
      padding-left: 20px;
      background-color: whitesmoke;
    }
    .active {
      color: white;
      background-color: black;
    }
    .none {
      background-color: whitesmoke;
    }
  </style>
</head>
<body>
<ul id="menu">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >直播</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)于</a></li>
</ul>
<script src="jquery-1.7.2.min.js"></script>
<script>
  $('#menu li a').click(function () {
    var f = this;
    $('#menu li a').each(function () {
      this.className = this == f ? 'active' : 'none'
    });
  });
</script>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery簡單實現(xiàn)遍歷數(shù)組的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)遍歷數(shù)組的方法,涉及jQuery遍歷數(shù)組的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
深入理解jQuery layui分頁控件的使用
jquery layui分頁控件在項目開發(fā)階段經(jīng)常用到，下面通過本文給大家介紹jQuery layui分頁控件的使用，非常不錯，感興趣的朋友一起看下吧
2016-08-08
jQuery插件zTree實現(xiàn)更新根節(jié)點中第i個節(jié)點名稱的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)更新根節(jié)點中第i個節(jié)點名稱的方法,結(jié)合實例形式分析了樹形插件zTree針對節(jié)點的更新操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03
jQuery實現(xiàn)點擊下拉框中的值累加到文本框中的方法示例
這篇文章主要介紹了jQuery實現(xiàn)點擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁面元素屬性動態(tài)獲取與操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
jquery實現(xiàn)左右滑動菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)左右滑動菜單效果代碼,涉及jquery鼠標事件及頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法
這篇文章主要介紹了jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法,轉(zhuǎn)換url地址本文中介紹的是將相對url轉(zhuǎn)化為絕對url,需要的朋友可以參考下
2015-12-12
通過pjax實現(xiàn)無刷新翻頁(兼容新版jquery)
這篇文章主要介紹了通過pjax實現(xiàn)無刷新翻頁，兼容新版jquery，使用心得方法,需要的朋友可以參考下
2014-01-01
jQuery使用$.ajax提交表單完整實例
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實例形式分析了jQuery基于ajax數(shù)據(jù)提交的具體步驟與數(shù)據(jù)處理技巧,非常簡單實用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
2015-12-12
jQuery數(shù)據(jù)類型小結(jié)(14個)
jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類型(built-in datatype)，還包括一些擴展的數(shù)據(jù)類型(virtual types)，如Selectors、Events等，通過本文給大家分享14個jquery數(shù)據(jù)類型，感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
SinaEditor使用方法詳解
本篇文章主要是對SinaEditor使用方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12