JQuery实现选项卡（ 附代码）
样式：
代码：
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>* {margin: 0;padding: 0;}#main {width: 300px;margin: 50px auto 0;}#menu ul li {list-style: none;float: left;width: 100px;height: 50px;background-color: blueviolet;text-align: center;line-height: 50px;}#menu ul .active {background-color: chartreuse;}#contain ul li {list-style: none;width: 300px;height: 400px;background-color: blue;display: none;}#contain ul .active {background-color: red;display: block;}style>
head><body><div id="main"><div id="menu"><ul><li class="active">选项1li><li>选项2li><li>选项3li>ul>div><div id="contain"><ul><li class="active">内容1li><li>内容2li><li>内容3li>ul>div>div><script src="./jquery-3.5.1.min.js">script><script>$("#menu ul li").on("click", function () {var index = $(this).index();$(this).addClass("active").siblings().removeClass("active");$("#contain ul li").removeClass("active").eq(index).addClass("active");})script>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！