탐색 모음 헤더 메뉴 항목을 클릭한 후 색상을 변경하는 방법을 jQuery가 구현하는 방법에 대한 자세한 예-JS 튜토리얼-php.cn

탐색 모음 헤더 메뉴 항목을 클릭한 후 색상을 변경하는 방법을 jQuery가 구현하는 방법에 대한 자세한 예

小云云

풀어 주다： 2017-12-31 16:42:34

원래의

2081명이 탐색했습니다.

이 글에서는 탐색 모음 헤더 메뉴 항목을 클릭한 후 색상을 변경하는 jQuery의 방법을 주로 소개합니다. 페이지 요소의 순회 및 속성 변환을 위한 마우스 이벤트에 대한 jQuery의 응답이 포함되어 있으므로 참고하시기 바랍니다. 그것은 모두에게 도움이 될 수 있습니다.

효과는 다음과 같습니다:

더 이상 고민하지 않고 바로 코드로 넘어가겠습니다:

<!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>

로그인 후 복사