jquery点击图标来回切换的几种方法(如开关

发布网友发布时间：2022-04-26 02:39

我来回答

共2个回答

热心网友时间：2022-04-22 15:25

先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。

//点击每个按钮后进行按钮切换图片操作

$(".tab-bar-item").on("click", function () {

//先const clickImg变量为他的data属性（选中图片），然后找到img图片的src属性将未选中的图片点击后替换为选中图片

const clickImg = $(this).data("img");

$(this).find("img").attr("src",clickImg);

//找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了

$(this).siblings().each(function(){

const noclickImg= $(this).attr("img")

$(this).find("img").attr("src",noclickImg);

})

}

热心网友时间：2022-04-22 16:43

通常是通过切换class来达到这种效果，toggleClass

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<style>
*{ padding:0;margin:0;font-size:14px;box-sizing:border-box; }
.cb{ padding-left: 20px;height:20px;cursor: pointer;float:left;margin-right: 24px; }
.normal{ background: url(https://img.alicdn.com/imgextra/i4/2344162546/TB2Hkl0j.QIL1JjSZFhXXaDZFXa_!!2344162546.png) no-repeat; }
.checked{ background: url(https://img.alicdn.com/imgextra/i2/2344162546/TB2M9qldb3XS1JjSZFFXXcvupXa_!!2344162546.png) no-repeat; }
</style>
</head>
<body>
<p class="cb normal">篮球</p>
<p class="cb normal">足球</p>
<p class="cb normal">排球</p>
</body>
<script type="text/javascript">
$(function(){
$('.normal').click(function(){
$(this).toggleClass('checked');
});
});
</script>
</html>