（24）-- 制作复杂选项卡

最新推荐文章于 2021-09-23 19:48:21 发布

Fredreck1919

最新推荐文章于 2021-09-23 19:48:21 发布

阅读量265

点赞数

分类专栏： JavaScript Web基础文章标签：关联选项卡

本文链接：https://blog.csdn.net/Fredreck1919/article/details/79079545

版权

Web基础同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

#引入JavaScript制作复杂选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
	body,ul,li{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.wrap{
		width: 500px;
		height: 500px;
		border:1px solid red;
		
		margin:0 auto;
		margin-top: 50px;
		

	}
	.title li{
		width: 126px;
		height: 50px;
		border: 1px solid pink;
		float: left;
		box-sizing: border-box;
		margin-left: -1px;
		border-top: none;
		
		line-height: 50px;
		text-align: center;
		cursor: pointer;
	}
	.title li:first-child{
		border-left: none;
	}
	.title li:last-child{
		border-right: none;
	}
	 .title .active1{
		border-bottom: none;
	}
	.content li{
		height: 450px;
		display: none;
		line-height: 450px;
		text-align: center;
		
		
	}
	.content .active2{
		display: block;
	}
</style>

</head>
<body>
	<div class="wrap">
		<ul class="title" >
			<li class='active1'>标题一</li>
			<li>标题二</li>
			<li>标题三</li>
			<li>标题四</li>

		</ul>
		<ul class='content' >
			<li class='active2'>内容一</li>
			<li>内容二</li>
			<li>内容三</li>
			<li>内容四</li>
		</ul>
	</div>
	<script src="./jquery-1.8.3.min.js"></script>
	<script>
		$('.title li').click(function(){
			$(this).attr('class','active1').siblings().removeAttr('class');
			var ind=$(this).index();
			$('.content li').eq(ind).attr('class','active2').siblings().removeAttr('class');
		})
	</script>
</body>
</html>

兄弟连学python

Python学习交流、资源共享群：563626388 QQ

Fredreck1919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（24）-- 制作复杂选项卡

#引入JavaScript制作复杂选项卡选项卡 body,ul,li{ padding: 0; margin: 0; list-style: none; } .wrap{ width: 500px; height: 500px; border:1px solid red; margin:0 auto; margin-top
复制链接

扫一扫

专栏目录