實現效果
![圖片描述]( "圖片描述")
html代碼
<!DOCTYPE html>
<html>
<head>
<title>選項卡練習</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div class="container">
<div class="tab-link-container">
<ul>
<li><a href="#" class="tab-link ">非上市公司非上市公司</a></li>
<li><a href="#" class="tab-link tab-hover">股份公司</a></li>
<li><a href="#" class="tab-link ">股份公司</a></li>
</ul>
</div>
<div class="tab-content-container">
<div class="tab-content">
<p>中國石油化工股份有限公司</p>
</div>
<div class="tab-content">
<p>賬戶管理資金歸集</p>
</div>
<div class="tab-content">
<p>中國化工股份有限公司</p>
</div>
</div>
</div>
<script src="tab.js"></script>
</body>
</html>
css 代碼
.container {
display: flex;
width: 500px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
}
.container .tab-link-container {
width: 100px;
border: 1px solid #00f;
}
.container .tab-link-container .tab-hover {
color: #000;
background: linear-gradient(to right, #00f, #fff);
}
.container .tab-link-container ul {
list-style: none;
}
.container .tab-link-container ul li {
height: 40px;
text-align: center;
}
.container .tab-link-container ul li a {
display: flex;
align-items: center;
justify-content: center;
line-height: 12px;
color: blue;
box-sizing: border-box;
font-size: 12px;
width: 100%;
height: 100%;
padding: 5px;
background: linear-gradient(to right, #0ff, #fff);
transition: all 3s;
}
.container .tab-link-container ul li a:hover {
color: #000;
background: linear-gradient(to right, #00f, #fff);
}
.container .tab-content-container {
flex: 1 1;
border: 1px solid #0ff;
}
.container .tab-content {
display: none;
transition: all 1s linear;
}
js代碼
let linkArray = document.getElementsByClassName('tab-link');
for (let i = 0; i < linkArray.length; i++) {
linkArray[i].onclick = change;
}
let currentIndex = 0;
init();
function init() {
changeContent();
}
function change() {
if (this.classList.contains('tab-hover')) {
return;
}
removeHoverClass(this);
addHoverClass(this);
changeContent(this);
}
function removeHoverClass(that) {
let current = document.getElementsByClassName('tab-hover')[0];
current.classList.remove('tab-hover');
}
function addHoverClass(that) {
that.classList.add('tab-hover');
}
function changeContent() {
let contentArray = document.getElementsByClassName('tab-content');
contentArray[currentIndex].style.display = 'none';
for (let i = 0; i < linkArray.length; i++) {
if (linkArray[i].classList.contains('tab-hover')) {
currentIndex = i;
break;
}
}
contentArray[currentIndex].style.display = 'block';
}
