Home > Article > Web Front-end > Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it

Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it

小云云Original: 2017-12-31 16:42:342103browse

This article mainly introduces jQuery's method of changing the color of the navigation bar header menu item after clicking it, involving jQuery's response to mouse events for traversal and attribute transformation of page elements. Friends who need it can refer to it. I hope it will help. Everyone.

The effect is as follows:

Without further ado, let’s get straight to the code:

<!DOCTYPE html> 
<html> 
<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" >关于</a></li> 
</ul> 
<script src="jquery-1.7.2.min.js"></script> 
<script> 
  $(&#39;#menu li a&#39;).click(function () { 
    var f = this; 
    $(&#39;#menu li a&#39;).each(function () { 
      this.className = this == f ? &#39;active&#39; : &#39;none&#39; 
    }); 
  }); 
</script> 
</body> 
</html>

Related Recommended:

JavaScript to implement personalized navigation bar special effects

JavaScript to implement the sample code of exquisite personalized navigation bar somersault cloud effect

How to implement the navigation bar link to jump after clicking, and add color to the corresponding link on the new page

The above is the detailed content of Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how jQuery implements editable tables and generates json resultsNext article：Detailed explanation of how jQuery implements editable tables and generates json results

See more

Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it

Related articles