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属性。
下面是效果图:(待补充)

相关文章

  • jQuery插件Validate实现自定义表单验证

    jQuery插件Validate实现自定义表单验证

    这篇文章主要介绍了jQuery插件Validate实现自定义表单验证,自定义一个验证方法,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery内容过滤选择器用法分析

    jQuery内容过滤选择器用法分析

    这篇文章主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
    2015-02-02
  • 详解jQuery简单的表格应用

    详解jQuery简单的表格应用

    本文主要对表格的简单应用:表格变色;表格展开关闭;表格内容筛选进行实例分析介绍。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方

    Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),需要的朋友可以参考下
    2016-11-11
  • 日期时间范围选择插件:daterangepicker使用总结(必看篇)

    日期时间范围选择插件:daterangepicker使用总结(必看篇)

    下面小编就为大家带来一篇日期时间范围选择插件:daterangepicker使用总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • jquery滚动特效集锦

    jquery滚动特效集锦

    本文给大家汇总介绍的是jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码,都是分厂常用的一些文字以及图文的无缝滚动特效,希望能够对大家熟悉jQuery有所帮助。
    2015-06-06
  • jQuery给表格添加分页效果

    jQuery给表格添加分页效果

    这篇文章主要为大家详细介绍了利用jQuery给表格添加分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • jquery中用函数来设置css样式

    jquery中用函数来设置css样式

    本文主要对jquery中用函数来设置css样式的方法进行详细介绍,具有很好的参考价值,下面就跟小编一起来看下吧
    2016-12-12
  • jquery实现多级下拉菜单的实例代码

    jquery实现多级下拉菜单的实例代码

    多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码,有需要的朋友可以参考一下
    2013-10-10
  • jQuery fadeTo方法调整图片的透明度使用介绍

    jQuery fadeTo方法调整图片的透明度使用介绍

    利用jquery的fadeTo方法可以简单的制作一些很不错的动画效果.可以使图片或者文字或者区块以不同的透明度效果出现.例如以下练习实例,感兴趣的朋友可以参考下哈
    2013-05-05

最新评论