如何使用jq封装tab切换

最新推荐文章于 2024-07-29 18:19:14 发布

恩阿

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量2.7k

点赞数 7

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_49017093/article/details/111300207

版权

css部分：

			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100%;
				display:flex ;
			}
			.left{
				width: 200px;
			}
			.left li{
				width: 200px;
				height: 60px;
				background: #FFC0CB;
				text-align: center;
				line-height: 60px;
				cursor: pointer;
				border-bottom: 3px solid firebrick;	
			}
			.left .active{
				background: paleturquoise;
				color: white;
			}
			.right{
				width: 100%;
				border: 1px solid black;
				display: 1;
			}
			.right div{
				display: none;
			}

html部分：

<div class="box">
			<ul class="left">
				<li class="active">首页</li>
				<li>商城</li>
				<li>后台</li>
			</ul>	
				<div class="right">
					<div style="display: block;">
						<h1>首页</h1>
					</div>
					<div>
						<h2>内容区域</h2>
					</div>
					<div>
						<h2>后台管理系统</h2>
					</div>
				</div>
			</div>

<script src="./jquery-3.4.1.min.js"></script>
			<script>
				 $(function(){
		          $(".left li").click(function(){
		              $(this).addClass("active").siblings().removeClass("active")
		              var index=$(this).index()
		              $(".right>div").eq(index).show().siblings().hide()
		    		 	 }) 
   				   })
			</script>