html + jquery地图点位点击变色
要实现点位点击变色，可以使用jQuery监听点位元素的点击事件，并在事件处理函数中改变其CSS样式。以下是一个简单的示例：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点位点击变色</title>
<style>
.map-point {
width: 20px;
height: 20px;
background-color: #00f;
margin: 5px;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.selected {
background-color: #f00;
}
</style>
</head>
<body>
<div id="map">
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<!-- 更多点位 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.map-point').click(function() {
$(this).toggleClass('selected');
});
});
</script>
</body>
</html>在这个示例中，我们定义了一个类 .map-point 来表示地图上的点位，并设置了基础样式。我们还定义了一个 .selected 类，当点位被选中时，它将具有不同的颜色。
jQuery脚本部分监听 .map-point 的点击事件，并使用 .toggleClass() 方法来在点位元素上添加或移除 .selected 类，从而实现点击变色的效果。
评论已关闭