1. 程式人生 > >Jquery | 基礎 | 事件的鏈式寫法

Jquery | 基礎 | 事件的鏈式寫法

自身 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 | 基礎 | 事件的鏈式寫法