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

今天我们还来和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低配版本：