이 글에서는 탐색 모음 헤더 메뉴 항목을 클릭한 후 색상을 변경하는 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>
$('#menu li a').click(function () {
var f = this;
$('#menu li a').each(function () {
this.className = this == f ? 'active' : 'none'
});
});
</script>
</body>
</html>관련 권장 사항:
JavaScript로 개인화된 탐색 모음 특수 효과 구현
JavaScript to 절묘한 맞춤형 네비게이션 바 공중제비 구름 효과 구현 샘플 코드
클릭 후 점프하도록 네비게이션 바 링크를 구현하고 새 페이지의 해당 링크에 색상을 추가하는 방법
위 내용은 탐색 모음 헤더 메뉴 항목을 클릭한 후 색상을 변경하는 방법을 jQuery가 구현하는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
