Github：tab_JQ
一. 需求
设计一个新闻选项卡，要求如下：
- 点击不同的选项卡时，下方能够切换显示对应的内容；
- 要求 JavaScript 部分全部使用 JQuery 完成
- 利用 JQuery 的选择器
- 利用 JQuery 给选项卡添加事件
实现效果类似于下图：
二. 代码
tab_JQ.html
<!DOCTYPE html>
<html>
<head>
<title>新闻选项卡_JQ</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="tab_JQ.css" />
</head>
<body>
<div id="div0">
<input type="button" value="~~~" class="active">
<input type="button" value="!!!">
<input type="button" value="???">
<div style="display: block">
<p>Hello~</p>
</div>
<div>
<p>Thank you!</p>
</div>
<div>
<p>Are you OK?</p>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="tab_JQ.js"></script>
</html>
省略 tab_JQ.css ?
tab_JQ.js
$(document).ready(function() {
$("input").click(function() {
$(this).addClass("active").siblings("input").removeClass("active");
$("#div0 div").eq($(this).index()).show().siblings("div").hide();
});
});
三. 效果
- 点击第1个选项 “~~~"
![1]()
- 点击第2个选项 “!!!”
![2]()
- 点击第3个选项 “???”
![3]()
