jQuery选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

IT-Xu_LongTeng

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量95

点赞数

文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_44269204/article/details/90140796

版权

Html的代码

<body>
		<div class="wrap">
			<ul class="blist clearfix">
				<li class="active">电影</li>
				<li>电脑</li>
				<li>冰箱</li>
				<li>空调</li>
			</ul>
			<ul class="blsit-list">
				<li>A-电影</li>
				<li>B-电脑</li>
				<li>C-冰箱</li>
				<li>D-空调</li>
			</ul>
		</div>
	</body>

Css的代码

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wrap {
				margin-left: 50px;
				margin-top: 50px;
			}
			/*清浮动---clearfix*/
			
			.clearfix {
				*zoom: 1;
			}
			
			.clearfix:after {
				content: "";
				clear: both;
				display: block;
				height: 0;
				font-size: 0;
				visibility: hidden;
			}
			
			.blist {
				border: 1px solid #d9d9d9;
				width: 275px;
				height: 32px;
			}
			
			.blist li:first-child {
				border-left: none;
			}
			
			.blist li {
				list-style: none;
				width: 68px;
				height: 32px;
				border-left: 1px solid #d9d9d9;
				font-size: 14px;
				font-family: "楷体";
				line-height: 32px;
				text-align: center;
				float: left;
				/*鼠标样式改变为一个手*/
				cursor: pointer;
				/*字体免选中*/
				-webkit-user-select: none;
			}
			
			.blsit-list {
				width: 275px;
			}
			
			.blsit-list li {
				list-style: none;
				width: 275px;
				border: 1px solid #ccc;
				height: 200px;
				border-top: none;
			}
			
			.wrap .blist li.active {
				font-weight: bold;
				color: red;
				border-top: 2px solid red;
				position: relative;
				top: -1px;
				height: 31px;
			}
			
			.blsit-list li:first-child {
				display: block;
			}
			
			.blsit-list li {
				display: none;
			}
		</style>

jQuery的代码

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
							$('.blist').on('click','li',function(){
								var indexs=$(this).index();					
								$(this).addClass('active').siblings().removeClass('active');
								$(this).parents('.wrap').find(".blsit-list li").eq(indexs).show().siblings().hide();
							})
						})			
		</script>