如何使用 CSS 和 JavaScript 创建垂直选项卡菜单?
cssjavascriptweb developmentfront end technology
在本文中，我们将讨论如何使用 CSS 和 JavaScript 创建垂直选项卡菜单。
选项卡是一种容器，其主要目的是显示和浏览网站的各种内容。选项卡通常用于管理空间并使网站更加用户友好，而无需重新加载太多次。这些选项卡中的内容通常紧密相关但又相互排斥。
有几种类型的选项卡，可在各种情况下创建和使用 -
水平选项卡
带有辅助选项卡的水平选项卡
无框水平选项卡
垂直选项卡
带有辅助选项卡的垂直选项卡
垂直选项卡也会划分数据，但垂直排列。它们具有水平选项卡的所有主要特征，但如果选项卡数量较多，则具有更好的可扩展性。垂直选项卡还提供了额外的描述部分，用于总结选项卡的内容。
创建选项卡的步骤
以下是使用 CSS 和 JavaScript 创建选项卡的步骤 -
在正文中，标签在 div 标签下创建选项卡，该标签具有自定义数据属性。
创建另一个 div 标签，用于存储具有指定 id 的选项卡的内容。
为每个内容标签指定数据属性，以便一次只显示一个内容选项卡
使用 JavaScript，我们可以显示选项卡的内容。
Example.html
在此部分，我们通过构建三个垂直方向的按钮(Tab1、Tab2 和 Tab3)和三个 div 段落来构建页面的正文结构。从下面的代码中你可以看到。
<!--HTML 代码-->
<div class="tab">
<button class="tablinks" onclick="JavaScript:selectTab('tab1');">
Tab1
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab2');">
Tab2
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab3');">
Tab3
</button>
</div>
<div id="tab1" class="tabcontent">
<h3>TAB First</h3>
<p>Tutorialspoint Easy To learn</p>
</div>
<div id="tab2" class="tabcontent">
<h3>TAB Second</h3>
<p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Tab Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
</div>
Example.css
在此部分中，样式已添加到页面。设置按钮的宽度和高度，以及创建悬停效果并在将鼠标悬停在按钮上时更改按钮的背景颜色。
<style>
/*CSS*/
* {
box-sizing: border-box;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.tab button:hover{
background-color: rgb(18, 84, 198);
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 80%;
border-left: none;
height: 180px;
display: none;
text-align: center;
background-color: antiquewhite;
}
</style>
Example.js
在这一部分中，我们构造一个函数 selectTab 并将 tabindex 作为参数传递，同时添加样式 display 属性，这样当您点击按钮时，选项卡内容就会显示在页面上。正如您从下面的代码中看到的那样。
<!-- Java script -->
<script>
function selectTab(tabIndex) {
// 声明所有变量
var i, tabcontent;
// 获取所有带有 class="tabcontent" 的元素并隐藏它们
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
//显示选定的选项卡
document.getElementById(tabIndex).style.display = "block";
}
</script>
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab</title>
<style>
/*CSS*/
* {
box-sizing: border-box;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.tab button:hover{
background-color: rgb(18, 84, 198);
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 80%;
border-left: none;
height: 180px;
display: none;
text-align: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--HTML Code-->
<div class="tab">
<button class="tablinks" onclick="JavaScript:selectTab('tab1');">
Tab1
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab2');">
Tab2
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab3');">
Tab3
</button>
</div>
<div id="tab1" class="tabcontent">
<h3>TAB First</h3>
<p>Tutorialspoint Easy To learn</p>
</div>
<div id="tab2" class="tabcontent">
<h3>TAB Second</h3>
<p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Tab Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
</div>
<!-- Java script -->
<script>
function selectTab(tabIndex) {
// 声明所有变量
var i, tabcontent;
// 获取所有带有 class="tabcontent" 的元素并隐藏它们
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
//显示选定的选项卡
document.getElementById(tabIndex).style.display = "block";
}
</script>
</body>
</html>
