效果如下:
完整代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦作市人民政府官网垂直型Tab切换效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
background-color: #f0f0f0;
}
.container {
width: 100%;
max-width: 800px;
margin: 50px auto;
display: flex;
background-color: #fff;
}
.tab-container {
display: flex;
flex-direction: column;
width: 150px;
background-color: #f1f1f1;
}
.tab {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
cursor: pointer;
background-color: #f1f1f1;
border-right: 6px solid #f1f1f1;
transition: 0.3s;
}
.tab:hover,
.tab.active {
background-color: #fff;
border-right: 6px solid #32a2ff;
}
.content-container {
flex: 1;
padding: 20px;
}
.content {
display: none;
}
.content.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tab-container">
<div class="tab active" onclick="changeTab(0)">走进焦作</div>
<div class="tab" onclick="changeTab(1)">要闻动态</div>
<div class="tab" onclick="changeTab(2)">政务专栏</div>
</div>
<div class="content-container">
<div class="content active" id="content-0">
<p>走进焦作的相关内容...</p>
<p>林花谢了春红,太匆匆。无奈朝来寒雨,晚来风。</p>
</div>
<div class="content" id="content-1">
<p>要闻动态的相关内容...</p>
<p>人间没有单纯的快乐,快乐总夹带着烦恼和忧虑。</p>
</div>
<div class="content" id="content-2">
<p>政务专栏的相关内容...</p>
<p>装作拥有某样品质,实际上就等于承认了自己并没有这样品质。</p>
</div>
</div>
</div>
<script>
function changeTab(index) {
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');
tabs.forEach((tab, i) => {
if (i === index) {
tab.classList.add('active');
contents[i].classList.add('active');
} else {
tab.classList.remove('active');
contents[i].classList.remove('active');
}
});
}
</script>
</body>
</html>