1效果图：
2代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡效果</title>
<link rel="stylesheet" href="../css/tab-list.css">
</head>
<body>
<div class="main">
<ul id="option">
<li onclick="setTab(0)">第一张</li>
<li onclick="setTab(1)">第二张</li>
<li class="active" onclick="setTab(2)">第三张</li>
<li onclick="setTab(3)">第四张</li>
</ul>
<ul id="content">
<li>第一张内容</li>
<li>第二张内容</li>
<li class="active">第三张内容</li>
<li>第四张内容</li>
</ul>
</div>
<script src="../js/tab-list.js"></script>
</body>
</html>
css:
*{
padding:0;
margin:0;
list-style:none;
}
.main{
width:100%;
margin-top:50px;
}
#option{
height:38px;
line-height:38px;
border:1px solid darkgray;
width:396px;
margin: 0 auto;
border-radius:5px 5px 0 0;
}
#option li{
float:left;
height:38px;
width:99px;
text-align: center;
background-color:darkkhaki;
border-right:1px solid dargray;
cursor: pointer;
}
#option li.active{
background-color:blue;
}
#content{
border:1px solid darkgray;
border-top:none;
width:396px;
margin: 0 auto;
border-radius:0 0 5px 5px;
}
#content li{
display:none;
height:200px;
line-height:200px;
text-align: center;
}
#content li.active{
display:block;
}
js:
var options = document.getElementById("option").getElementsByTagName("li");
var contents = document.getElementById("content").getElementsByTagName("li");
function setTab(n){
for(let i=0;i<options.length;i++){
if(i==n){
options[i].className="active";
contents[i].style.display="block";
}else{
options[i].className="";
contents[i].style.display="none";
}
}
}
3总结：
总的来说，还是用js选中点击的元素，在修改css样式。
学习到的css属性：
1:border-radius:圆角
border-radius:5px;对四个角设置圆角属性
border-radius:5px 0;对左上和右下角设置圆角属性
border-radius:0 0 5px 5px;对右下角和左下角设置圆角属性
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角（顺时针顺序）。
2:cursor: 鼠标移动在选定元素上的样式
cursor：pointer;一只手
cursor：wait;转圈圈
cursor：text;文本
3:display:none;隐藏元素，同时被隐藏的元素不影响页面上的其他元素。