切り替えボタンのスタイルをクリックすると、画像を切り替えることができます.

切り替えボタンのスタイルと、あるコンテナの画像を切り替えてもう一度作業中に発生した問題を、2つの機能を1回結合して記録しました.直接コードを入力しました:
html:

    //      
    <img id="img0" src="../image/home/[email protected]" alt="" id="tuoanlinggai">
    //  
    <div class="itemb" tapmode onclick="yanse();">
         <img style="" src="../image/cpxq/qiehuan/[email protected]" alt="">
        <span id="color">      span>
    div>

css:

.itemb{
  height: 1.5rem;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 0.5rem;``
  padding:0 0.4rem;
  margin-right: 0.3rem;
  margin-bottom: 0.5rem;
}
.itemb-active{
  border: solid 0.01rem #33ccff;
  color:#33ccff;
  height: 1.5rem;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 0.5rem;
  /*padding:0 0.4rem;*/
  margin-right: 0.3rem;
  margin-bottom: 0.5rem;
}

js:

function yanse() {
     isClick = true;
    //              
    $('.itemb').mouseover(function() {
            $(this).addClass('itemb-active');
            var yance1 = $("#color").text();
            var yance2 = $("#chicun").text();
            color = yance1;
            chicun = yance2;
        }).mouseout(function() {
            $(this).removeClass('itemb-active');
        })
        // chicunname = shu.innerText;
        //     
        var img = document.getElementById("img0")
                    //                img.setAttribute("src","../image/cpxq/qiehuan/[email protected]");
            img.src = "../image/cpxq/qiehuan/[email protected]";
}

画像の経路は本人が自分で書いたもので、使うなら画像の経路を変更することを覚えています.