基于jquery的简单table切换

最新推荐文章于 2022-06-27 16:12:46 发布

波塞西呀

最新推荐文章于 2022-06-27 16:12:46 发布

阅读量508

点赞数

文章标签：基于jquery的简单table切换

本文链接：https://blog.csdn.net/qq_1307495/article/details/102816188

版权

基于jquery的简单table切换
我们根据思路走点击按钮时显示下标相对应的内容，然后让其他兄弟姊妹隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.tab-title{
				width: 50px;
				height: 30px;
				border: 1px solid #E2E2E2;
				display: inline-block;
				background: #E2E2E2;
				border-radius: 3px;
				line-height: 30px;
				font-size: 12px;
				text-align: center;
				color: #FFFFFF;
			}
			.tab-list{
				list-style: none;
				width: 200px;
				height: 200px;
				padding: 0;
				border: 1px solid red;
				display: none;
			}
			.tab-list.on{
				display: block;
			}
			.tab-title.on{
				border: 0;
				background: gold;
				color: #FFFFFF;
			}
			ul{
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="tab-box">
			<div>
				<a class="tab-title on">按钮1</a>
				<a class="tab-title">按钮二</a>
				<a class="tab-title">按钮三</a>
			</div>
			<ul>
				<li class="tab-list on">内容1</li>
				<li class="tab-list">内容2</li>
				<li class="tab-list">内容3</li>
			</ul>
		</div>
		<hr />
		<div class="tab-box">
			<div>
				<a class="tab-title on">按钮1</a>
				<a class="tab-title">按钮二</a>
				<a class="tab-title">按钮三</a>
			</div>
			<ul>
				<li class="tab-list on">内容1</li>
				<li class="tab-list">内容2</li>
				<li class="tab-list">内容3</li>
			</ul>
		</div>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script>
	$(".tab-title").click(function(){
		//添加类名
		$(this).addClass('on')
		$(this).siblings().removeClass('on')
		//获取当前元素的下标
		var index = $(this).index()
		//找到当前元素的祖先
		var paren = $(this).parents(".tab-box")
		//find 查找子元素
		var ele = paren.find(".tab-list")
		ele.eq(index).addClass('on')
		//删除其他兄弟的类名on
		ele.eq(index).siblings().removeClass('on')
	})
</script>

波塞西呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的简单table切换

基于jquery的简单table切换我们根据思路走点击按钮时显示下标相对应的内容，然后让其他兄弟姊妹隐藏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .tab-title{ w...
复制链接

扫一扫