js选项卡

jiezi

6 年前

实现效果

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’);
}