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