选项卡

一.使用css实现

实现思路

1.选项卡通过锚链接获取content 给content添加id选择器，nav通过id选择器获取content内容
2.隐藏所有的content
3.通过target属性（ #content1:target）控制被选中的content的样式 设置为显示

实现代码

1.html

		<div class="tab">
			<ul class="nav">
				<li>
					<a href="#content1">
						选项1
					</a>
				</li>
				<li>
					<a href="#content2">
						选项2
					</a>
				</li>
				<li>
					<a href="#content3">
						选项3
					</a>
				</li>
				<li>
					<a href="#content4">
						选项4
					</a>
				</li>
			</ul>
			<div class="content">
				<div id="content1">
					内容1
				</div>
				<div id="content2">
					内容2
				</div>
				<div id="content3">
					内容3
				</div>
				<div id="content4">
					内容4
				</div>
			</div>
		</div>
	

2.css

			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}


			body {
				background:skyblue;
			}

			.tab {
				width: 800px;
				margin: auto;
			}

			.nav {
				height: 50px;
				width: inherit;
				display: flex;
				justify-content: center;
				overflow: hidden;
				margin-top: 50px;

			}

			.nav li {
				width: 20%;
				height: 50px;
				background-color: #F0F8FF;
				margin: 0px 1px;
				text-align: center;
				border-radius: 10px;
			}

			.nav li a {
				display: block;
				width: 100%;
				height: 50px;
				font-size: 12px;
				line-height: 50px;
				transition: .22s ease;

			}


			.nav li a:hover {

				background-color: #F5F5DC;
				border-radius: 10px;

			}

			.content div {
				height: 450px;
				width: 100%;
				background-color: #F5F5DC;
				display: none;
			}

			#content1:target {
				display: block;
				background-color: #F5F5DC;
			}

			#content2:target {
				display: block;
			}

			#content3:target {
				display: block;
			}

			#content4:target {
				display: block;
			}

3.如图

二.利用js实现

实现思路

主要完成两个功能：1.点击li样式变化 2.点击li的同时同索引的div显示其他div隐藏。

1.获取元素

• var nav_child=document.getElementsByTagName('li');
  其中getElementsByTagName可返回带有指定标签名的对象的集合。
• var ctn=document.getElementsByClassName('ctn');
  其中getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

2.定义外循环记录索引值（通过index方法）

3.添加点击事件 定义内循环 内循环用于隐藏li的样式 以及隐藏div

4.点击时给li添加样式（通过className方法）；给li同索引的div增加样式使其显示（style方法）

实现代码

1.html

		<div class="tab">
			<ul class="nav">
				<li class="show_nav">
					选项1
				</li>
				<li>
					选项2
				</li>
				<li>
					选项3
				</li>
				<li>
					选项4
				</li>
			</ul>
			<div class="content">
				<div class="ctn" style="display: block;">
					内容1
				</div>
				<div class="ctn" style="display: none;">
					内容2
				</div>
				<div class="ctn" style="display:none;">
					内容3
				</div>
				<div class="ctn" style="display: none;">
					内容4
				</div>

			</div>
		</div>

2.css

			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}

			.tab {
				width: 100%;
				margin: auto;
			}

			.nav {
				width: 500PX;
				height: 50px;
				background-color: #ace5e5;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

			.nav li {
				width: 25%;
				text-align: center;
				height: 50px;
				line-height: 50px;
			}

			.nav li:hover {
				cursor: pointer;
				color: #A52A2A;
			}

			.show_nav {
				color: #A52A2A;
				background-color: #FFF8DC;
			}
			

3.javaScript

		window.onload = function() {
			var nav_child=document.getElementsByTagName('li');   //获取li列表
			var ctn=document.getElementsByClassName('ctn');//获取div列表
			var i=0;
			for(i=0;i<nav_child.length;i++){
				nav_child[i].index=i;//记录索引值
				nav_child[i].onclick=function(){
					for(i=0;i<nav_child.length;i++){
						nav_child[i].className="";//清除li的class属性
						ctn[i].style.display="none";
					}
					this.className="show_nav";
					ctn[this.index].style.display="block";
				};
			};

		}

如图