jQuery实现选项卡
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- import css -->
<link rel="stylesheet" href="css/tab.css">
</head>
<body>
<div class="tabBox">
<ul class="navBox">
<li class="active">编程</li>
<li>学习</li>
<li>锻炼</li>
</ul>
<div class="active">编程使我快乐</div>
<div>学习使我幸福</div>
<div>锻炼使我健康</div>
</div>
<!-- import js -->
<script src="js/jQuery.js"></script>
<script src="js/1.js"></script>
</body>
</html>
js
$(function($) {
$('.tabBox li').on('click', function() {
let index = $(this).index();
$(this).addClass('active').siblings().removeClass('active').parent().nextAll().removeClass('active').eq(index).addClass('active');
});
});