Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it-JS Tutorial-php.cn

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

小云云

Release： 2017-12-31 16:42:34

Original

2130 people have browsed it

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>

Copy after login

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!