首頁 > web前端 > js教程 > jQuery方法簡潔實作隔行換色及toggleClass的使用_jquery

jQuery方法簡潔實作隔行換色及toggleClass的使用_jquery

WBOY
發布: 2016-05-16 17:40:30
原創
1267 人瀏覽過

今天用簡潔的方法toggleClass()實作了隔行換色:程式碼如下:

複製程式碼 程式碼如下:





隔行換色












































藍楓前端 藍楓前端
藍楓前端 藍楓前端

藍楓前端 藍楓前端
藍楓前端 藍楓前端
藍楓前端 藍楓前端
藍楓前端 藍楓前端
藍楓前端 藍楓前端


<script> <BR><STRONG> <BR>第一種比較複雜的方法<div class="codetitle">: <span><a style="CURSOR: pointer" data="28205" class="copybut" id="copybut28205" onclick="doCopy('code28205')"><U>複製程式碼<div class="codebody" id="code28205"> 程式碼如下:<BR><BR> <BR>$(function() <BR>{ <BR>{ <BR>$( "#table tr").hover(function() <BR>{ <BR>$(this).addClass("h"); <BR>},function() <BR>{ <BR>$(this) .removeClass("h"); <BR>}) <BR>$("input").click(function() <BR>{ <BR>if($(this).attr("checked")) <BR>{ <BR>$(this).closest("tr").addClass("c"); <BR>} <BR>else <BR>{ <BR>$(this).closest("tr" ).removeClass("c"); <BR>} }) <BR>}) <STRONG> <BR><BR>第二種比較簡單的方法<BR>: <BR>toggleClass () 對設定或移除被選元素的一個或多個類別進行切換。 <div class="codetitle">此方法檢查每個元素中指定的類別。如果不存在則新增類,如果已設定則刪除之。這就是所謂的切換效果。 <span>不過,透過使用 "switch" 參數,您能夠規定只刪除或只新增類別。 <a style="CURSOR: pointer" data="6178" class="copybut" id="copybut6178" onclick="doCopy('code6178')"><U>複製程式碼<div class="codebody" id="code6178"><BR> 程式碼如下:<BR><BR> <BR>$(function(){ <BR><BR> <BR>$(function(){ <BR>$(" #table tr").hover(function(){ <BR>$(this).toggleClass("h"); <BR>}) <BR>$("input").click(function(){ <BR>var d = $(this); <BR>d.closest('tr').toggleClass("c",d.attr("checked")) ; }) <🎜>}) <🎜> </script>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板