html5 滑动页面切换tab

在 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 切换的功能。