写一个jQuery课程设计页面
时间: 2023-12-18 13:03:27 浏览: 136
课程设计网页
好的,下面是一个简单的jQuery课程设计页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery课程设计</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.course {
margin-bottom: 20px;
}
.course h2 {
font-size: 24px;
margin: 0;
padding: 0;
}
.course p {
font-size: 16px;
margin: 0;
padding: 0;
}
.course button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="course">
<h2>jQuery入门课程</h2>
<p>本课程将教你从基础开始学习jQuery,包括选择器、事件、动画等内容。</p>
<button class="btn-learn-more">了解更多</button>
<div class="more-info hidden">
<p>本课程包括以下内容:</p>
<ul>
<li>jQuery选择器的基本用法</li>
<li>事件绑定和解绑</li>
<li>常用的DOM操作</li>
<li>动画效果的实现</li>
</ul>
</div>
</div>
<div class="course">
<h2>jQuery高级课程</h2>
<p>本课程将教你深入学习jQuery,包括Ajax、插件开发等内容。</p>
<button class="btn-learn-more">了解更多</button>
<div class="more-info hidden">
<p>本课程包括以下内容:</p>
<ul>
<li>Ajax的使用和原理</li>
<li>插件开发的基本流程</li>
<li>常用jQuery插件的介绍和使用</li>
<li>jQuery源码解析</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.btn-learn-more').click(function(){
$(this).siblings('.more-info').toggleClass('hidden');
});
});
</script>
</body>
</html>
```
这个页面包括了两个课程的介绍,每个课程都有一个“了解更多”的按钮,点击按钮可以展开更多内容。使用了jQuery的toggleClass()方法来切换隐藏和显示状态。
阅读全文