Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
更新时间：2013年04月11日 15:42:56 作者：
电脑屏幕大小是固定的，那么如何在有限的空间放更多的内容呢，jquery的tab切换式浏览却可以解决这个问题
我们的电脑屏幕大小是固定的，那么如何在有限的空间放更多的内容呢？
我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。
其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。
这里我想到了两种方法，给大家分享一下。
好了不多说，下面看代码：
第一种，是常规的方法：
[javascript]
$(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">
$(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主要设置是否显示某部分内容)，同时更换图片。
第二种方法：使用arguments.callee.em ^= 1自动选择数组参数
[javascript]
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
这里将图片地址放到了一个数组中，异或运算，自动选择数组参数，实现图片的切换。
内容的隐藏显示，则使用了.css属性。
下面是效果图：（待补充）
我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。
其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。
这里我想到了两种方法，给大家分享一下。
好了不多说，下面看代码：
第一种，是常规的方法：
[javascript]
复制代码 代码如下:
$(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">
$(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主要设置是否显示某部分内容)，同时更换图片。
第二种方法：使用arguments.callee.em ^= 1自动选择数组参数
[javascript]
复制代码 代码如下:
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//换图片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隐藏下方的div
var content =$(".hidecontent");
//根据display属性判断该进行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
这里将图片地址放到了一个数组中，异或运算，自动选择数组参数，实现图片的切换。
内容的隐藏显示，则使用了.css属性。
下面是效果图：（待补充）
相关文章
下面小编就为大家带来一篇Jquery实现的简单轮播效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
这篇文章主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧,需要的朋友可以参考下2015-09-09
IE下可以通过 document.selectIOn.createRange ();来实现，而Firefox（火狐）浏览器则 需要首先获取光标位置，然后对value进行字符串截取处理2010-06-06
这篇文章主要介绍了jQuery实现合并表格单元格中相同行操作,结合实例形式分析了jQuery针对table表格实现单元格合并的相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了jQuery中过滤器的基本用法,结合简单实例形式分析了jQuery过滤器针对table表格元素属性进行判断与设置的相关操作技巧,需要的朋友可以参考下2017-10-10
下面小编就为大家带来一篇picLazyLoad 实现图片延时加载(包含背景图片)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
JQuery的重要性对一个coder来说应该是不言而喻的， 多少次在应聘的时候被问及是否会JQuery；多少次在写脚本的时候因为浏览器的不兼容而吐血；多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后，很多问题都被轻易解决了。2010-07-07
这篇文章主要为大家介绍了JQuery选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.2010-10-10
为jquery的ajaxfileupload增加附加参数的方法
这篇文章主要介绍了为jquery的ajaxfileupload增加附加参数的方法,需要的朋友可以参考下2014-03-03
最新评论