码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-10-17 00:16:53      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:oct   3.3   his   padding   block   基础   ali   bsp   lock   

 

$(".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 | 基础 | 事件的链式写法

标签:oct   3.3   his   padding   block   基础   ali   bsp   lock   

原文地址:https://www.cnblogs.com/jj81/p/9801000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!