快捷導(dǎo)航

Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))

更新時(shí)間：2013年04月11日 15:42:56 作者：

電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢，jquery的tab切換式瀏覽卻可以解決這個(gè)問題

我們的電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢？
我們應(yīng)該給用戶足夠的選擇權(quán)，當(dāng)他們想要看某些內(nèi)容的時(shí)候可以很快的看到，不想看的時(shí)候就把他隱藏。于是就有了題目說的這個(gè)問題。

其實(shí)這個(gè)問題很簡(jiǎn)單，那么，之所以拿出來跟大家分享，一方面我們大家相互交流，另一方面，也是對(duì)自己的學(xué)習(xí)的一種總結(jié)。

這里我想到了兩種方法，給大家分享一下。
好了不多說，下面看代碼：

第一種，是常規(guī)的方法：
[javascript]

復(fù)制代碼代碼如下:

 
$(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"> 

這里主要是給圖片控件注冊(cè)一個(gè)點(diǎn)擊事件，點(diǎn)擊的時(shí)候添加CSS控制(css主要設(shè)置是否顯示某部分內(nèi)容)，同時(shí)更換圖片。

第二種方法：使用arguments.callee.em ^= 1自動(dòng)選擇數(shù)組參數(shù)
[javascript]

復(fù)制代碼代碼如下:

 
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"); 
//根據(jù)display屬性判斷該進(jìn)行的操作 
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"); 
//根據(jù)display屬性判斷該進(jìn)行的操作 
if (content.css("display")!= "none") { 
content.slideUp("slow"); 
} else { 
content.slideDown("slow"); ; 
} 
} 