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

最新推荐文章于 2024-04-06 16:13:18 发布

原创最新推荐文章于 2024-04-06 16:13:18 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

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

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