Jquery | 基礎 | 事件的鏈式寫法
阿新 • • 發佈：2018-10-17
自身 display jquery spl doc 基礎 code pad fun
$(".title").click(function () {
$(this).addClass("curcol").next(".content").css("display", "block");
});
<!DOCTYPE html> <html> <head> <title>jQuery事件的鏈式寫法</title> <script src="jquery-3.3.1.min.js" type="text/javascript"></script> <style type="text/css"> .iframe { border: solid 1px #888; font-size: 13px; } .title { padding: 6px; background-color: #EEE; } .content { padding: 8px 0px; font-size: 12px; text-align: center; display: none; } .curcol { background-color: #CCC } </style> <script type="text/javascript"> $(function () { $(".content").html("您好！歡迎來到jQuery的精彩世界。"); $(".title").click(function () { $(this).addClass("curcol").next(".content").css("display", "block"); }); }); </script> </head> <body> <div class="iframe"> <div class="title">標題</div> <div class="content"></div> </div> </body> </html>
當頁面首次加載時，被包含的內容<div> 標記是不可見的，當用戶單擊主題<div> 標記時，改變自身的背景色，並將內容<div> 標記顯示出來。
Jquery | 基礎 | 事件的鏈式寫法