Jquery | 基础 | 事件的链式写法

 

$(".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> 标记显示出来。

posted @ 2018-10-16 22:02  听说这是最长的名字了  阅读(163)  评论(0)  编辑  收藏  举报