parent
abb20843a7
commit
e16dd37a56
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh - CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF - 8">
|
||||
<meta name="viewport" content="width=device-width, initial - scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap" rel="stylesheet">
|
||||
<title>风景视图</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="tab-container">
|
||||
|
||||
<div class="tab-nav">
|
||||
<button class="tab-item active" data-target="content1">标签一</button>
|
||||
<button class="tab-item" data-target="content2">标签二</button>
|
||||
<button class="tab-item" data-target="content3">标签三</button>
|
||||
<button class="tab-item" data-target="content4">标签四</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div id="content1" class="content-panel active">
|
||||
<p>在湖畔的黄昏里，天空与山脉共舞，云霞映照出生命的绚烂。站在码头的尽头，我们都是这宇宙中的微小尘埃，却也能感受到大自然的壮丽与宁静。每一刻的美丽，都是生命对我们的馈赠，让我们学会珍惜，学会欣赏。</p>
|
||||
<img src="./imgs/1-lakes.jpg" alt="示例图片">
|
||||
</div>
|
||||
<div id="content2" class="content-panel">
|
||||
<p>在这片静谧的自然角落，两只鸟儿相互依偎，彼此间的默契如同它们头顶上那金色的羽冠般闪耀。它们的存在是对抗孤独的力量，也是对和谐共生最美好的诠释。在这个瞬息万变的世界里，唯有真挚的情感才能跨越一切界限，让心灵得以栖息。</p>
|
||||
<img src="./imgs/2-brown.jpg" alt="示例图片">
|
||||
</div>
|
||||
<div id="content3" class="content-panel">
|
||||
<p>在这幅画面中，火烈鸟们优雅地站立着，它们的羽毛呈现出鲜艳的粉红色调，仿佛是大自然赋予的色彩盛宴。背景是一片翠绿的竹林，与火烈鸟形成了鲜明的对比。阳光透过树叶洒下斑驳的光影，为整个场景增添了一丝神秘的氛围。这两只火烈鸟似乎正在享受彼此的陪伴，它们的姿态亲密而温馨，让人感受到自然界中那份纯真的美好。</p>
|
||||
<img src="./imgs/3-birds.jpg" alt="示例图片">
|
||||
</div>
|
||||
<div id="content4" class="content-panel">
|
||||
<p>在这片宁静的山谷中，湖水清澈见底，倒映着巍峨的山峰和苍翠的森林。山峰被夕阳染成了金黄色，与蓝天白云相映成趣。这里是大自然的杰作，是人类心灵的净土。在这里，我们可以感受到生命的美好，领悟到人与自然的和谐共生。让我们珍惜这片土地，守护这份宁静，让大自然永远绽放它的光彩。</p>
|
||||
<img src="./imgs/4-lake-mount.jpg" alt="示例图片">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 344 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 710 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,16 @@
|
||||
document.querySelector('.tab-nav').addEventListener('click', function(e) {
|
||||
const tabItem = e.target.closest('.tab-item');
|
||||
if (!tabItem) return;
|
||||
|
||||
//全部清除acrive状态
|
||||
document.querySelectorAll('.tab-item, .content-panel').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
//标签页active
|
||||
tabItem.classList.add('active');
|
||||
|
||||
//将当前的active状态添加到对应的标签内容中
|
||||
const targetId = tabItem.dataset.target;
|
||||
document.getElementById(targetId).classList.add('active');
|
||||
});
|
||||
@ -0,0 +1,50 @@
|
||||
.tab-container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
.tab-item {
|
||||
padding: 12px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.tab-item.active {
|
||||
border-bottom: 3px solid #2196F3;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.5s;
|
||||
}
|
||||
|
||||
.content-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.content-panel{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
body .tab-item{
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
Loading…
Reference in new issue