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

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击图标来回切换的几种方法（如开关相关的知识，希望对你有一定的参考价值。

先给导航块的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);

)

参考技术A

通常是通过切换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>

JavaScript点击div来回切换两个颜色及两张图片切换的方法

点击div切换颜色的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    .test1{
        width:100px;
        height: 100px;
        background-color: green;
    }
</style>

<script type="text/javascript">
    function myFunction(){
        var test1 = document.getElementById(‘test1‘);
        if(test1.style.backgroundColor==‘yellow‘){
            test1.style.backgroundColor=‘green‘;
        }else{
            test1.style.backgroundColor=‘yellow‘;
        }
    }
</script>
</head>

<body>
    <div class="test1" id="test1" alt="" onclick="myFunction()">
    </div>
</body>
</html>

这里有一个疑问就是：如果js语句中颜色代码为十六进制则不显示效果。目前还没有解决这个问题求大神指教QAQ

点击图片来回切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    function toggle(){
        var test1 = document.getElementById(‘test1‘);
        if(test1.src.indexOf(‘on‘) >= 0){
            test1.src="./images/off.png";
        }else{
            test1.src="./images/on.png";
        }
    }
</script>

    <img id="test1" src="./images/on.png" alt="" onclick="toggle()" />
</body>
</html>

以上是关于jquery点击图标来回切换的几种方法（如开关的主要内容，如果未能解决你的问题，请参考以下文章

jquery控制元素的隐藏和显示的几种方法。

jQuery Mobile页面跳转切换的几种方式

fiddler断点方法

react做tab切换的几种方式

JavaScript点击div来回切换两个颜色及两张图片切换的方法