jQuery制作选项卡

最新推荐文章于 2021-11-15 23:04:33 发布

领导同意

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量393

点赞数

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/qq_39686864/article/details/100350164

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基于jQuery制作的选项卡

<!DOCTYPE html>
<html>
<head>
	<title>选项卡</title>
	<script 
		src="https://code.jquery.com/jquery-1.12.4.min.js"
  		integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  		crossorigin="anonymous">>
	</script>
	<style type="text/css">
		.btns input{
			width: 150px;
			height: 45px;
			border: 0px;
			background-color: #ddd;
		}

		.btns .current{
			background-color: gold;
		}

		.cons div{
			width: 500px;
			height: 500px;
			background-color: gold;
			display: none;
			text-align: center;
			line-height: 500px;
			font-size: 30px;
		}

		.cons .active{
			display: block;
		}
	</style>

	<script type="text/javascript">
		$(function(){
			var $btn = $('.btns input');
			var $div = $('.cons div');

			$btn.click(function(){
				$(this).addClass('current').siblings().removeClass('current');
				$div.eq($(this).index()).addClass('active').siblings().removeClass('active');
			});

		});
	</script>

</head>
<body>
	<div class="btns">
		<input type="button" name="" value="01" class="current">
		<input type="button" name="" value="02">
		<input type="button" name="" value="03">
	</div>

	<div class="cons">
		<div class="active">选项卡 一 内容</div>
		<div>选项卡 二 内容</div>
		<div>选项卡 三 内容</div>
	</div>
</body>
</html>

领导同意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery制作选项卡

基于jQuery制作的选项卡<!DOCTYPE html><html><head> <title>选项卡</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIk...
复制链接

扫一扫