点击切换按钮样式并且可以切换图片

切换按钮样式以及可以切换某一容器中的图片
再一次工作中遇到的问题,将两种功能进行了一次结合,并且记录了一下。
直接上代码了:

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]";
}

图片路径是本人自己写的,用的话记得更改图片路径。

你可能感兴趣的:(JavaScript)