jq简单实现选项卡效果

很简单的一个demo，平时经常用到，整理下，每次用直接复制粘贴挺香的。

DEMO下载 https://download.csdn.net/download/tianpeng1996/12535658

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQ实现选项卡-鹏仔先生</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			padding: 300px;
			box-sizing: border-box;
		}
		.tab-box{
			width: 500px;
			display: flex;
			align-items: center;
		}
		.tab-box span{
			color: #fff;
			font-size: 16px;
			line-height: 30px;
			text-align: center;
			display: inline-block;
			width: 100px;
			background: #000;
			cursor: pointer;
		}
		.tab-box .active{
			background: skyblue;
		}
		.content div{
			display: none;
		}
		.content .active{
			display: block;
		}
	</style>
</head>
<body>
	<div class="tab-box">
		<span class="active">tab-1</span>
		<span>tab-2</span>
		<span>tab-3</span>
		<span>tab-4</span>
		<span>tab-5</span>
	</div>
	<div class="content">
		<div class="active">内容1</div>
		<div>内容2</div>
		<div>内容3</div>
		<div>内容4</div>
		<div>内容5</div>
	</div>
</body>
</html>

<script>
    $(".tab-box span").click(function(){
    	// 给当前的添加类名，并清除同级其他的类名
        $(this).addClass("active").siblings().removeClass("active");
        // 获取当前点击的索引
        var index = $(this).index();
        // 对应索引对应的添加类名active，并清楚同级其他的类名
        $(this).parent().siblings().children().eq(index).addClass("active").siblings().removeClass("active");
    })
// 前端共享博客 http://sharedblog.cn
// 作者：鹏仔先生
</script>

前端共享博客 http://sharedblog.cn

鹏仔资源网 http://iqzhan.com

posted @ 2020-06-19 15:46  鹏仔先生  阅读(7)  评论(0)    收藏  举报  来源