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

最新推荐文章于 2024-12-18 09:42:44 发布

原创最新推荐文章于 2024-12-18 09:42:44 发布 · 3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#点击切换样式 #点击更改图片 #点击更改容器样式以及更改图片 #切换事件 #点击切换图片

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何结合HTML、CSS和JavaScript实现点击切换按钮来改变按钮样式，同时能切换容器内的图片。提供了详细的代码示例，注意实际使用时需调整图片路径。

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

html：

    //要切换的图片
    <img id="img0" src="../image/home/shangpin1@3x.png" alt="" id="tuoanlinggai">
    //按钮
    <div class="itemb" tapmode onclick="yanse();">
         <img style="" src="../image/cpxq/qiehuan/xing@3x.png" 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/xing@3x.png");
            img.src = "../image/cpxq/qiehuan/xing@3x.png";
}