<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0;
list-style: none;
}
ul {
display: flex;
justify-content: center;
}
li {
width : 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
display: inline-block;
margin: 50px 10px;
}
ul li.on {
background-color: pink;
}
</style>
</head>
<boby>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
// $(sel).addClass(name);
// $(sel).removeClass(name);
// $(sel).toggleClass(name);
$("li").on("click", function() {
$(this).addClass("on"); //css에서 조금 더 명시적으로 선언하면 좋음 ul li.on
$(this).siblings().removeClass("on"); //어떤 클래스를 제거할지 명시적으로 선언하면 좋음
});
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.