最简单的原生js选项卡功能

最新推荐文章于 2022-10-13 13:11:16 发布

资深CV大师

最新推荐文章于 2022-10-13 13:11:16 发布

阅读量199

点赞数

分类专栏： H5html

本文链接：https://blog.csdn.net/weixin_44903107/article/details/106256279

版权

H5html 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<title>tab选项卡</title>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style type="text/css">
			li {
				list-style: none;
			}

			* {
				margin: 0px;
				padding: 0px;
			}
			.active {
				background-color: red;
			}
			.tab_nav {
				display: none;
			}
			.on {
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<ul style="display: flex;">
				<li class="list_nav active" id="nav1" onclick="aaa(1)">菜单</li>
				<li class="list_nav" id="nav2" onclick="aaa(2)">菜单</li>
				<li class="list_nav" id="nav3" onclick="aaa(3)">菜单</li>
			</ul>
			<ul>
				<li class="tab_nav on" id="tab1">1</li>
				<li class="tab_nav" id="tab2">2</li>
				<li class="tab_nav" id="tab3">3</li>
			</ul>
		</div>
		<script>
			function aaa(i){
				$('.list_nav').removeClass('active');
				$('.tab_nav').removeClass('on');
				$('#nav'+i).addClass('active');
				$('#tab'+i).addClass('on');
			}
		</script>

	</body>
</html>

资深CV大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单的原生js选项卡功能

<!DOCTYPE html><html> <head> <title>tab选项卡</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> li { list-st
复制链接

扫一扫

专栏目录