css 切换选项卡

CSS切换选项卡是网页设计中常用的一个功能，它可以让用户在同一页面中浏览多个内容页面，增加网站的交互性和可用性。下面将介绍如何使用CSS实现切换选项卡。

HTML代码：div class="tab">
       ul class="tab-nav">
           li>
    选项卡1/li>
           li>
    选项卡2/li>
           li>
    选项卡3/li>
       /ul>
       div class="tab-content">
           div class="tab-panel">
    选项卡1内容/div>
           div class="tab-panel">
    选项卡2内容/div>
           div class="tab-panel">
    选项卡3内容/div>
       /div>
    /div>
CSS代码：.tab-nav {
       display: flex;
       justify-content: center;
       align-items: center;
       list-style: none;
       padding: 0;
       margin: 0;
}
.tab-nav li {
       margin-right: 20px;
       cursor: pointer;
       padding: 10px;
       border: 1px solid #999;
       border-radius: 5px 5px 0 0;
       background-color: #f8f8f8;
}
.tab-nav li.active {
       border-bottom-color: transparent;
       background-color: #fff;
}
.tab-panel {
       display: none;
}
.tab-panel.active {
       display: block;
}
    JS代码：var tabNav = document.querySelector('.tab-nav');
    var tabPanels = document.querySelectorAll('.tab-panel');
tabNav.addEventListener('click', function(event) {
       var target = event.target;
   if (target.tagName === 'LI') {
           var index = Array.prototype.indexOf.call(tabNav.children, target);
       Array.prototype.forEach.call(tabPanels, function(panel) {
               panel.classList.remove('active');
       }
    );
           tabPanels[index].classList.add('active');
       Array.prototype.forEach.call(tabNav.children, function(li) {
               li.classList.remove('active');
       }
    );
           target.classList.add('active');
   }
}
    );
    

以上代码实现了一个简单的切换选项卡功能。HTML结构中包含一个包裹选项卡的div，其中tab-nav表示选项卡名称，tab-panel表示选项卡内容。CSS中通过flex布局实现选项卡居中，使用伪类.active实现选项卡激活状态。JS中通过监听点击事件实现选项卡切换，对当前选项卡和内容面板使用.active类实现选中效果。

以上是关于如何使用CSS实现切换选项卡的介绍，通过灵活运用CSS和JavaScript，你可以创造出更简单易用的交互效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！