快捷導(dǎo)航

jQuery方法簡(jiǎn)潔實(shí)現(xiàn)隔行換色及toggleClass的使用

更新時(shí)間：2013年03月15日 10:29:31 作者：

隔行換色的展示效果想必大家早已熟悉了吧，今天在幫大家回憶一下本例中主要用到的方法是toggleClass()，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你

今天用一種簡(jiǎn)潔的方法toggleClass()實(shí)現(xiàn)了隔行換色:代碼如下：

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>隔行換色</title> 
<script src="js/jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body,table,td, { 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
.h { 
background:#f3f3f3; 
color:#000; 
} 
.c { 
background:#ebebeb; 
color:#000; 
} 
</style> 
</head> 
<body> 
<div id="aaa"> 
<form> 
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> 
<tr> 
<td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>藍(lán)楓前端</td> 
<td>藍(lán)楓前端</td> 
</tr> 
</table> 
</form> 
</div> 
<script> 

第一種比較復(fù)雜的方法：

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

 
$(function() 
{ 
$("#table tr").hover(function() 
{ 
$(this).addClass("h"); 
},function() 
{ 
$(this).removeClass("h"); 
}) 
$("input").click(function() 
{ 
if($(this).attr("checked")) 
{ 
$(this).closest("tr").addClass("c"); 
} 
else 
{ 
$(this).closest("tr").removeClass("c"); 
} 
}) 
}) 

第二種比較簡(jiǎn)單的方法：
toggleClass() 對(duì)設(shè)置或移除被選元素的一個(gè)或多個(gè)類(lèi)進(jìn)行切換。
該方法檢查每個(gè)元素中指定的類(lèi)。如果不存在則添加類(lèi)，如果已設(shè)置則刪除之。這就是所謂的切換效果。
不過(guò)，通過(guò)使用 "switch" 參數(shù)，您能夠規(guī)定只刪除或只添加類(lèi)。

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

 
$(function(){ 
$("#table tr").hover(function(){ 
$(this).toggleClass("h"); 
}) 
$("input").click(function(){ 
var d = $(this); 
d.closest('tr').toggleClass("c",d.attr("checked")) ; 
}) 
}) 
</script> 
</body> 
</html> 

您可能感興趣的文章: