分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

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

发布时间:2023-09-06 02:18责任编辑:郭大石关键词:暂无标签

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved