效果展示：
点击选项几会出现选项几的内容
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精美选项卡</title>
<link rel="stylesheet" type="text/css" href="css/cute.css" />
<link rel="stylesheet" type="text/css" href="css/index1.css" />
<body>
<div class="tab" id="tab">
<ul class="tab-nav" id="tab-nav">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
<ul class="tab-item" id="tab-item">
<li>选项卡1的内容</li>
<li>选项卡2的内容</li>
<li>选项卡3的内容</li>
<li>选项卡4的内容</li>
<li>选项卡5的内容</li>
</ul>
</div>
</body>
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>css代码：
.tab{
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* Safari */
width: 960px;
height: 730px;
background: #FFF;
margin:50px auto;
border: 1px solid #E0E0E0;
overflow: hidden;
}
#tab-nav,#tab-item{
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
position: relative;
}
.tab-nav>li{
float: left;
width: 20%;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #E0E0E0;
border-top: none;
/* 鼠标图形形状为小手 */
cursor: pointer;
}
.tab-item>li{
width: 100%;
height: 680px;
position: relative;
left: 0px;
top: 0px;
/* 保证li里面的字体居中 */
line-height: 680px;
text-align: center;
font-size: 56px;
color: #999;
}
js代码：
// 获取选项卡导航菜单所有li并返回一个li列表集合
let btn_nav_li_list = document.getElementById("tab-nav").getElementsByTagName("li");
// 获取选项卡项目内容所有li并返回一个li列表集合
let btn_item_li_list = document.getElementById("tab-item").getElementsByTagName("li");
let index=0;
for(let i=0;i<btn_item_li_list.length;i++){
// 当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见
btn_item_li_list[i].style.display="none";
}
// 第二块默认为第一个
btn_item_li_list[index].style.display="block";
// 第一块默认为第一个
btn_nav_li_list[index].style.background="#999";
for(let i=0;i<btn_nav_li_list.length;i++){
btn_nav_li_list[i].onclick=function(){
let index=i;
setA(index);
// 先隐藏所有选项卡项目
for(var itemi = 0; itemi < btn_item_li_list.length; itemi++) {
btn_item_li_list[itemi].style.display = "none";
}
// 单机选项卡导航时显示
btn_item_li_list[index].style.display = "block";
}
}
// 改变导航栏颜色
function setA(index){
for(let i=0;i<btn_nav_li_list.length;i++){
btn_nav_li_list[i].style.background="#FFF";
}
btn_nav_li_list[index].style.background="#999";
}
新技能：
/* 鼠标图形形状为小手 */
cursor: pointer;
//控制选项卡内容的显示与隐藏
for(let i=0;i<btn_item_li_list.length;i++){
// 当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见
btn_item_li_list[i].style.display="none";
}
btn_item_li_list[index].style.display="block";