一.使用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";
				};
			};

		}

如圖