我们的电脑屏幕大小是固定的，那么如何在有限的空间放更多的内容呢？
我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。
其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。
这里我想到了两种方法，给大家分享一下。
好了不多说，下面看代码：
第一种，是常规的方法：
[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实现显示和隐藏的4种简单方式
- jquery和js实现对div的隐藏和显示方法
- JQuery显示、隐藏div的几种方法简明总结
- jQuery控制TR显示隐藏的几种方法
- jQuery控制TR显示隐藏的三种常用方法
- jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
- Jquery 点击按钮显示和隐藏层的代码
- JQuery显示隐藏页面元素的方法总结
- Jquery中使用show()与hide()方法动画显示和隐藏图片
- Jquery实现控件的隐藏和显示实例
- jquery关于表格及表格列隐藏和显示问题探讨
- jQuery实现基本隐藏与显示效果的方法详解
