Jquery实现点击切换图片并隐藏显示内容

60 阅读 0 评论 40 点赞

我是靠谱客的博主失眠水壶，最近开发中收集的这篇文章主要介绍Jquery实现点击切换图片并隐藏显示内容，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我们的电脑屏幕大小是固定的，那么如何在有限的空间放更多的内容呢？

我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。

其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。

这里我想到了两种方法，给大家分享一下。

好了不多说，下面看代码：

第一种，是常规的方法：

$(function(){
   var images = ['images/up.png', 'images/down.png']
   $(img).onClick(function(){
       if($(img).attr("class")=="up"){
           $(img).attr("src",images[1]);
           $(img).removeClass();
       }else{
           $(img).attr("src",images[0]);
           $(img).addClass("up");
       }
   });
})
<img src="images/up.png" class="up">

这里主要是给图片控件注册一个点击事件，点击的时候添加CSS控制(css主要设置是否显示某部分内容)，同时更换图片