在
HTML5 中，可以使用 CSS3 和 JavaScript 来
实现滑动
页面切换 tab。以下是一个简单的示例：
HTML 代码：
```
<div class="
tabs">
<ul class="
tab-nav">
<li><a href="#
tab1">
Tab 1</a></li>
<li><a href="#
tab2">
Tab 2</a></li>
<li><a href="#
tab3">
Tab 3</a></li>
</ul>
<div class="
tab-content">
<div id="
tab1">
Tab 1 Content</div>
<div id="
tab2">
Tab 2 Content</div>
<div id="
tab3">
Tab 3 Content</div>
</div>
</div>
```
CSS 代码：
```
.
tabs {
position: relative;
}
.
tab-nav {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.
tab-nav li {
flex: 1;
text-align: center;
}
.
tab-nav li a {
display: block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0;
}
.
tab-nav li.active a {
background-color: #fff;
color: #000;
}
.
tab-content {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.
tab-content div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s;
}
.
tab-content div.active {
opacity: 1;
}
#
tab1 {
background-color: #f7f7f7;
}
#
tab2 {
background-color: #eee;
}
#
tab3 {
background-color: #f0f0f0;
}
```
JavaScript 代码：
```
var
tabNav = document.querySelector('.
tab-nav');
var
tabNavItems =
tabNav.querySelectorAll('li');
var
tabContent = document.querySelector('.
tab-content');
var
tabContentItems =
tabContent.querySelectorAll('div');
tabNav.addEventListener('click', function(e) {
e.preventDefault();
var target = e.target;
if (target.tagName === 'A') {
var href = target.getAttribute('href');
var id = href.substring(1);
var
tabNavActive =
tabNav.querySelector('.active');
var
tabContentActive =
tabContent.querySelector('.active');
tabNavActive.classList.remove('active');
target.parentNode.classList.add('active');
tabContentActive.classList.remove('active');
tabContent.querySelector('#' + id).classList.add('active');
}
});
```
该示例中，使用了 flex 布局来
实现 tab 栏的排列。通过 CSS3 中的 transition 属性来
实现 tab 内容的滑动
切换效果。在 JavaScript 中，通过事件委托的方式来
实现 tab 切换的功能。
最低0.47元/天 解锁文章
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
