（与jQuery靠近乎）-04实例--通过jq节点关系实现tabs选项卡菜单功能

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎

---

距离发blog已经2天，2天不见如隔三秋，

毕竟周末时间比较忙，见谅见谅！

 今天还是来用jQuery，毕竟还没靠完近乎，

今天整个用jQuery通过节点关系实现选项卡的菜单功能哦！

效果图：

 实现效果：点击标题几让底部框出现标题几的内容

               今天的主题跟节点选择有关，节点关系，选择器不太懂的先请去看以下内容：

（与jQuery靠近乎）02-与jQuery的初遇_风尚云网-CSDN博客（与jQuery靠近乎）01-js 与 jQuery对象转换https://blog.csdn.net/zsx0806/article/details/121237903?spm=1001.2014.3001.5502

都会了继续：

首先不用说了，创建一个HTML，引入jQuery，

接下来：

HTML内容：一个大盒子包几个div，

<div class="da">

			<div class="box1">
				<div>标题1</div>
				<div>标题2</div>
				<div>标题3</div>
			</div>

			<div class="box2">
				<div>标题1内容</div>
				<div>标题2内容</div>
				<div>标题3内容</div>
			</div>

</div>

再写一个简简单单的整个css

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.da {
			width: 250px;
			height: 200px;
			border: 1px solid #FFD700;
		}

		.box1 div {
			margin-left: -5px;
			width: 83px;
			display: inline-block;
			border: 1px solid #000000;
			text-align: center;
			background-color: #FFD700;
		}

		.box2 div {
			width: 200px;
			height: 200px;
		}
	</style>

OK，差不多了，

现在应该是这样的：

 接下来js：

<script type="text/javascript">
		$(function() {
			$(".box2 div").hide()
			$(".box2 div").eq(0).show()

			$(".box1 div").click(function() {
				
				$(".box2 div").hide()
				$(this).parent().next().children().eq($(this).index()).show()

			})
		})
	</script>

js,主要通过jQuery中的节点查找，以及父子元素，隐藏，显示  从而达到tabs低配版本：

今日份分享到这里结束了

我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，

关注风尚不迷路！

记得一键三连，禁止白嫖