点击图标切换(包括点击图标下面的文字也切换)

本文介绍了一个简单的图片切换功能实现方案,使用HTML与JavaScript配合完成。通过点击不同的按钮,可以实现图片之间的切换,并伴随按钮样式的变化反馈给用户。适用于网页前端交互设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML:
<pre name="code" class="html"> <div class="envir">
              <ul>
                  <li >
                      <img src="img/temp.png" id="pic"  class="on" />
                      <p>全部</p>
                  </li>
                  <li>
                      <img src="img/jinshui.png" id="pic2"  class="down"/>
                      <p>温湿度</p>
                  </li>
                  <li>
                      <img src="img/jinshui.png" class="down" />
                      <p>浸水</p>
                  </li>
                  <li>
                      <img src="img/yangan.png" class="down"/>
                      <p>烟感</p>
                  </li>
              </ul>
          </div>



js:

//图片切换$('.envir ul li img').click(function(){//当前点击的未选中 if($(this).attr("class")=="down"){//其它选中的状态变为未选中状态$('.envir ul li img').each(function(){if($(this).attr("class")=="on"){$(this).removeClass("on");$(this).addClass("down");}})//选中当前点击图片$(this).removeClass("down");$(this).addClass("on"); } })//点字切换$('.envir ul li p').click(function () { if ($(this).siblings("img").attr("class") == "down") { $('.envir ul li img').each(function () { if ($(this).attr("class") == "on") { $(this).removeClass("on"); $(this).addClass("down"); } }) //选中当前点击图片 $(this).siblings("img").removeClass("down"); $(this).siblings("img").addClass("on"); }});
 
 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值