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]()
