Jam's story

[JQuery] 모든 a태그에 있는 특정 클래스 제거 본문

WEB/JQuery

[JQuery] 모든 a태그에 있는 특정 클래스 제거

애플쩀 2022. 5. 23. 10:25 
<script>
$("div.topnav a").click(function(event){
	$("div.topnav a").removeClass("active");
	$(this).addClass("active");
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0px;}
.topnav{
background-color: #333;
overflow: auto;
}
.topnav a{
color:#f2f2f2;
text-decoration: none;
float:left;
padding: 14px 16px;
text-align: center;
}
.topnav a:hover{
background-color: #ddd;
color:black;
}
.topnav a:active{
	background-color: #4caf50;
	color:white;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#"class="active">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#"></a>
</div>
<div>
	<h2 id="tne">Top Navigation example</h2>
	<p onclick="p_click()">Lorem ipsum dolor sit amet.</p>
</div>

<script type="text/javascript">
$("div.topnav a").click(function(event){
/* 	alert("xxx"); */
	$("div.topnav a").removeClass("active");
	$(this).addClass("active");
});
</script>
</body>
</html>

 

저작자표시

'WEB > JQuery' 카테고리의 다른 글

[JQuery] 의사클래스 풍선도움말  (0) 2022.05.24
[JQuery] 누르면 보이고 사라지고  (0) 2022.05.23
[JQuery] show() hide()  (0) 2022.05.23
[JQuery] 버튼누르면 보이기 / 숨기기  (0) 2022.05.17
jQuery 설치  (0) 2022.05.17
'WEB/JQuery' Related Articles more
Comments