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