点击图标切换（包括点击图标下面的文字也切换）

关注

原创最新推荐文章于 2026-05-11 11:59:30 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

kotlin 实现安卓底部导航栏（点击变换图标和文字）+Fragment切换布局逻辑布局代码 .kt代码实现点击后图标和文字变换实现点击后Fragment切换效果图一、布局逻辑二、布局XML代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:t. 阅读详情

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