使用HTML和CSS创建响应式选项卡

翻滚的胖子
2023-06-09 11:53:59
前端技术
HTML CSS JavaScript

选项卡是网页设计中常用的交互组件，可以让用户在多个选项之间进行选择。本文将介绍如何使用HTML和CSS创建响应式选项卡，让你的网页更加美观、实用。

HTML代码

<div class="tabs">
   <div class="tab-header">
      <ul>
         <li class="active">选项卡1</li>
         <li>选项卡2</li>
         <li>选项卡3</li>
      </ul>
   </div>
   <div class="tab-content">
      <div class="tab-pane active">
         <p>选项卡1的内容</p>
      </div>
      <div class="tab-pane">
         <p>选项卡2的内容</p>
      </div>
      <div class="tab-pane">
         <p>选项卡3的内容</p>
      </div>
   </div>
</div>

以上是创建一个基础的选项卡所需的HTML代码。其中，<div class="tabs">是选项卡的最外层容器，<div class="tab-header">是选项卡的头部，用于展示选项卡的标签，<ul>中的<li>是选项卡的标签，<div class="tab-content">是选项卡的内容容器，用于展示不同选项卡对应的内容。

CSS代码

.tabs {
   border: 1px solid #ccc;
}

.tab-header ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
}

.tab-header li {
   padding: 10px 20px;
   cursor: pointer;
}

.tab-header li.active {
   background-color: #f0f0f0;
}

.tab-content .tab-pane {
   display: none;
   padding: 10px;
}

.tab-content .tab-pane.active {
   display: block;
}

以上是创建选项卡所需的CSS代码。其中，.tabs是选项卡的最外层容器的样式设置，.tab-header ul是选项卡头部中<ul>的样式设置，.tab-header li是选项卡标签的样式设置，.tab-header li.active是选项卡当前选中标签的样式设置，.tab-content .tab-pane和.tab-content .tab-pane.active是选项卡内容容器和当前选中选项卡容器的样式设置。

JavaScript代码

var tabHeaders = document.querySelectorAll(".tab-header li");
var tabContents = document.querySelectorAll(".tab-content .tab-pane");

for(var i = 0; i < tabHeaders.length; i++) {
   tabHeaders[i].addEventListener('click', function() {
      var tabName = this.innerHTML.trim();
      activateTab(tabName);
   });
}

function activateTab(tabName) {
   for(var i = 0; i < tabHeaders.length; i++) {
      if(tabHeaders[i].innerHTML.trim() == tabName) {
         tabHeaders[i].classList.add('active');
      }
      else {
         tabHeaders[i].classList.remove('active');
      }
   }
   for(var i = 0; i < tabContents.length; i++) {
      if(tabContents[i].getAttribute('data-tab') == tabName) {
         tabContents[i].classList.add('active');
      }
      else {
         tabContents[i].classList.remove('active');
      }
   }
}

以上是创建选项卡所需的JavaScript代码。其中，var tabHeaders = document.querySelectorAll(".tab-header li");是获取选项卡头部中的标签，var tabContents = document.querySelectorAll(".tab-content .tab-pane");是获取选项卡内容容器中的内容，for(var i = 0; i < tabHeaders.length; i++) {...}是循环遍历每个选项卡标签，tabHeaders[i].addEventListener('click', function() {...});是为每个标签添加点击事件，function activateTab(tabName) {...}是选项卡切换函数，用于切换选项卡的显示和隐藏。

通过以上的HTML、CSS和JavaScript代码，我们成功地创建了一个响应式选项卡，并提供了相应的函数和代码案例，让小白也能轻松上手。如果你想了解更多关于HTML和CSS的知识，请继续关注我们的博客。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com