我在使用 JavaScript 时遇到了一些困难,特别是在 Tabs 中使用 Tabs。我目前有 3 个主选项卡,每个选项卡内都有 3 个额外的子选项卡。问题是,当我从一个子选项卡切换到另一个,然后从另一个主选项卡切换时,所有其他子选项卡都会关闭,直到我手动打开它们。
例如,我加载页面,默认情况下打开 Main Tab 1 - Sub Tab 1。我从 Main Tab 1 - Sub Tab 1 切换到 Main Tab 1 - Sub Tab 2,它完美加载,但是如果我从 Main Tab 1 切换到 Main Tab 2,所有 Main Tab 2 Sub Tab 都会关闭,直到我手动打开它们。
您将在下面找到 HTML、CSS 和 JS 以及代码段。
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="sidebarHeader">
Sidebar Header
</div>
<div class="sidebarContent">
Sidebar Content
</div>
</div>
<div class="main">
<div class="mainHeader">
<nav class="mainHeaderNav">
<ul><a class="mainLinks active" onclick="openMenu(event, 'template')" href="#">Template</a></a></ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'mails')" href="#">Mails</a></ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'ptos')" href="#">PTOs</a></ul>
</nav>
</div>
<div class="mainContent active" id="template">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'localmajor')" href="#">Local & Major</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'escalation')" href="#">Escalation</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'afterhours')" href="#">After Hours</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'gems')" href="#">GEMS</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'chat')" href="#">Chat</a></ul>
</nav>
</div>
<div class="templateContent active" id="localmajor">
Local & Major Template Content
</div>
<div class="templateContent" id="escalation">
Escalation Template Content
</div>
<div class="templateContent" id="afterhours">
After Hours Template Content
</div>
<div class="templateContent" id="gems">
GEMS Template Content
</div>
<div class="templateContent" id="chat">
Chat Template Content
</div>
</div>
</div>
<div class="mainContent" id="mails">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'localoffice')" href="#">Local Office</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'majoraccount')" href="#">Major Account</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'quicklist')" href="#">Quick List</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'resellers')" href="#">Resellers</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'edc')" href="#">EDC</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, '3rdparty')" href="#">3rd Party</a></ul>
</nav>
</div>
<div class="templateContent active" id="localoffice">
Local Office Mails Content
</div>
<div class="templateContent" id="majoraccount">
Major Account Mails Content
</div>
<div class="templateContent" id="quicklist">
Quick List Mails Content
</div>
<div class="templateContent" id="resellers">
Resellers Mails Content
</div>
<div class="templateContent" id="edc">
EDC Mails Content
</div>
<div class="templateContent" id="3rdparty">
3rd Party Mails Content
</div>
</div>
</div>
<div class="mainContent" id="ptos">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'vacation')" href="#">Vacation</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'paidleave')" href="#">Paid Leave</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'sickleave')" href="#">Sick Leave</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'shiftswap')" href="#">Shift Swap</a></ul>
</nav>
</div>
<div class="templateContent active" id="vacation">
Vacation Content
</div>
<div class="templateContent" id="paidleave">
Paid Leave Content
</div>
<div class="templateContent" id="sickleave">
Sick Leave Content
</div>
<div class="templateContent" id="shiftswap">
Shift Swap Content
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='scripts.js'></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
font-family: Arial;
color: #ffffff;
}
a:active, a:link, a:hover, a:visited {
text-decoration: none;
color: #ffffff;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
background: linear-gradient(150deg,#282533 15%,#506367 70%,#58675e 95%)
}
.sidebar {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.sidebarHeader, .sidebarContent {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.main {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.mainHeader {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
text-align: right;
}
.mainContent {
display: none;
/*
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
*/
text-align: right;
}
.mainContent.active {
display: block;
}
.mainHeaderNav > ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.mainLinks.active {
border-bottom: 2px solid #00a2ff;
}
.mainLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContainer {
display: grid;
grid-template-rows: 0fr auto;
height: 100%;
}
.templateHeaderNav {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateHeaderNav > ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.templateLinks.active {
border-bottom: 2px solid #00a2ff;
}
.templateLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContent {
display: none;
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateContent.active {
display: block;
}
JS
function openMenu(evt, menu) {
// Declare all variables
var i, mainContent, mainLinks;
// Get all elements with class="mainContent" and hide them
mainContent = document.getElementsByClassName("mainContent");
for (i = 0; i < mainContent.length; i++) {
mainContent[i].style.display = "none";
}
// Get all elements with class="mainLinks" and remove the class "active"
mainLinks = document.getElementsByClassName("mainLinks");
for (i = 0; i < mainLinks.length; i++) {
mainLinks[i].className = mainLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(menu).style.display = "block";
evt.currentTarget.className += " active";
}
function openTemplate(evt, template) {
// Declare all variables
var i, templateContent, templateLinks;
// Get all elements with class="templateContent" and hide them
templateContent = document.getElementsByClassName("templateContent");
for (i = 0; i < templateContent.length; i++) {
templateContent[i].style.display = "none";
}
// Get all elements with class="templateLinks" and remove the class "active"
templateLinks = document.getElementsByClassName("templateLinks");
for (i = 0; i < templateLinks.length; i++) {
templateLinks[i].className = templateLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(template).style.display = "block";
evt.currentTarget.className += " active";
}
JavaScript 函数几乎是从 W3 Schools 复制的,Main 和 Sub 选项卡功能完全相同,只是采用了不同的类名。我知道当我从一个选项卡切换到另一个选项卡时,所有其他具有相同类的选项卡都会被隐藏,这导致这些选项卡隐藏在其他主菜单中,但是我无法弄清楚如何限制每个主选项卡基础。
对于长篇文章,我深表歉意,并在此先感谢您。
function openMenu(evt, menu) {
// Declare all variables
var i, mainContent, mainLinks;
// Get all elements with class="mainContent" and hide them
mainContent = document.getElementsByClassName("mainContent");
for (i = 0; i < mainContent.length; i++) {
mainContent[i].style.display = "none";
}
// Get all elements with class="mainLinks" and remove the class "active"
mainLinks = document.getElementsByClassName("mainLinks");
for (i = 0; i < mainLinks.length; i++) {
mainLinks[i].className = mainLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(menu).style.display = "block";
evt.currentTarget.className += " active";
}
function openTemplate(evt, template) {
// Declare all variables
var i, templateContent, templateLinks;
// Get all elements with class="templateContent" and hide them
templateContent = document.getElementsByClassName("templateContent");
for (i = 0; i < templateContent.length; i++) {
templateContent[i].style.display = "none";
}
// Get all elements with class="templateLinks" and remove the class "active"
templateLinks = document.getElementsByClassName("templateLinks");
for (i = 0; i < templateLinks.length; i++) {
templateLinks[i].className = templateLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(template).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
height: 100%;
margin: 0;
font-family: Arial;
color: #ffffff;
}
a:active, a:link, a:hover, a:visited {
text-decoration: none;
color: #ffffff;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
background: linear-gradient(150deg,#282533 15%,#506367 70%,#58675e 95%)
}
.sidebar {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.sidebarHeader, .sidebarContent {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.main {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.mainHeader {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
text-align: right;
}
.mainContent {
display: none;
/*
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
*/
text-align: right;
}
.mainContent.active {
display: block;
}
.mainHeaderNav > ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.mainLinks.active {
border-bottom: 2px solid #00a2ff;
}
.mainLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContainer {
display: grid;
grid-template-rows: 0fr auto;
height: 100%;
}
.templateHeaderNav {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateHeaderNav > ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.templateLinks.active {
border-bottom: 2px solid #00a2ff;
}
.templateLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContent {
display: none;
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateContent.active {
display: block;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="sidebarHeader">
Sidebar Header
</div>
<div class="sidebarContent">
Sidebar Content
</div>
</div>
<div class="main">
<div class="mainHeader">
<nav class="mainHeaderNav">
<ul><a class="mainLinks active" onclick="openMenu(event, 'template')" href="#">Template</a></a></ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'mails')" href="#">Mails</a></ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'ptos')" href="#">PTOs</a></ul>
</nav>
</div>
<div class="mainContent active" id="template">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'localmajor')" href="#">Local & Major</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'escalation')" href="#">Escalation</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'afterhours')" href="#">After Hours</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'gems')" href="#">GEMS</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'chat')" href="#">Chat</a></ul>
</nav>
</div>
<div class="templateContent active" id="localmajor">
Local & Major Template Content
</div>
<div class="templateContent" id="escalation">
Escalation Template Content
</div>
<div class="templateContent" id="afterhours">
After Hours Template Content
</div>
<div class="templateContent" id="gems">
GEMS Template Content
</div>
<div class="templateContent" id="chat">
Chat Template Content
</div>
</div>
</div>
<div class="mainContent" id="mails">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'localoffice')" href="#">Local Office</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'majoraccount')" href="#">Major Account</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'quicklist')" href="#">Quick List</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'resellers')" href="#">Resellers</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'edc')" href="#">EDC</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, '3rdparty')" href="#">3rd Party</a></ul>
</nav>
</div>
<div class="templateContent active" id="localoffice">
Local Office Mails Content
</div>
<div class="templateContent" id="majoraccount">
Major Account Mails Content
</div>
<div class="templateContent" id="quicklist">
Quick List Mails Content
</div>
<div class="templateContent" id="resellers">
Resellers Mails Content
</div>
<div class="templateContent" id="edc">
EDC Mails Content
</div>
<div class="templateContent" id="3rdparty">
3rd Party Mails Content
</div>
</div>
</div>
<div class="mainContent" id="ptos">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="templateLinks active" onclick="openTemplate(event, 'vacation')" href="#">Vacation</a></a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'paidleave')" href="#">Paid Leave</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'sickleave')" href="#">Sick Leave</a></ul>
<ul><a class="templateLinks" onclick="openTemplate(event, 'shiftswap')" href="#">Shift Swap</a></ul>
</nav>
</div>
<div class="templateContent active" id="vacation">
Vacation Content
</div>
<div class="templateContent" id="paidleave">
Paid Leave Content
</div>
<div class="templateContent" id="sickleave">
Sick Leave Content
</div>
<div class="templateContent" id="shiftswap">
Shift Swap Content
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='scripts.js'></script>
</body>
</html>
我已经修改了您的代码,以便在调用时传递选项卡名称,openTemplate()
并且仅重置与该选项卡关联的子选项卡。现在,一个选项卡内的任何交互都不会对其他选项卡产生任何影响。
我只修改了HTML和Javascript,没有修改CSS。
function openMenu(evt, menu) {
// Declare all variables
var i, mainContent, mainLinks;
// Get all elements with class="mainContent" and hide them
mainContent = document.getElementsByClassName("mainContent");
for (i = 0; i < mainContent.length; i++) {
mainContent[i].style.display = "none";
}
// Get all elements with class="mainLinks" and remove the class "active"
mainLinks = document.getElementsByClassName("mainLinks");
for (i = 0; i < mainLinks.length; i++) {
mainLinks[i].className = mainLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(menu).style.display = "block";
evt.currentTarget.className += " active";
}
function openTemplate(evt, template, tab) {
// Declare all variables
var i, templateContent, templateLinks;
// Get all elements with class="templateContent" and hide them
templateContent = document.getElementsByClassName("templateContent " + tab);
for (i = 0; i < templateContent.length; i++) {
templateContent[i].style.display = "none";
}
// Get all elements with class="templateLinks" and remove the class "active"
templateLinks = document.getElementsByClassName("templateLinks " + tab);
for (i = 0; i < templateLinks.length; i++) {
templateLinks[i].className = templateLinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(template).style.display = "block";
evt.currentTarget.className += " active";
}
html,
body {
height: 100%;
margin: 0;
font-family: Arial;
color: #ffffff;
}
a:active,
a:link,
a:hover,
a:visited {
text-decoration: none;
color: #ffffff;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
background: linear-gradient(150deg, #282533 15%, #506367 70%, #58675e 95%)
}
.sidebar {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.sidebarHeader,
.sidebarContent {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.main {
display: grid;
grid-template-rows: 0fr auto;
margin: 5px;
padding: 5px;
border: 2px solid #ffffff;
}
.mainHeader {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
text-align: right;
}
.mainContent {
display: none;
/*
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
*/
text-align: right;
}
.mainContent.active {
display: block;
}
.mainHeaderNav>ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.mainLinks.active {
border-bottom: 2px solid #00a2ff;
}
.mainLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContainer {
display: grid;
grid-template-rows: 0fr auto;
height: 100%;
}
.templateHeaderNav {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateHeaderNav>ul {
display: inline;
padding: 0;
margin: 0;
list-style-type: none;
}
.templateLinks.active {
border-bottom: 2px solid #00a2ff;
}
.templateLinks:hover {
border-bottom: 2px solid #00a2ff;
}
.templateContent {
display: none;
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.templateContent.active {
display: block;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="sidebarHeader">
Sidebar Header
</div>
<div class="sidebarContent">
Sidebar Content
</div>
</div>
<div class="main">
<div class="mainHeader">
<nav class="mainHeaderNav">
<ul><a class="mainLinks active" onclick="openMenu(event, 'template')" href="#">Template</a></a>
</ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'mails')" href="#">Mails</a></ul>
<ul><a class="mainLinks" onclick="openMenu(event, 'ptos')" href="#">PTOs</a></ul>
</nav>
</div>
<div class="mainContent active" id="template">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="template templateLinks active" onclick="openTemplate(event, 'localmajor', 'template')" href="#">Local & Major</a></a>
</ul>
<ul><a class="template templateLinks" onclick="openTemplate(event, 'escalation', 'template')" href="#">Escalation</a></ul>
<ul><a class="template templateLinks" onclick="openTemplate(event, 'afterhours', 'template')" href="#">After Hours</a></ul>
<ul><a class="template templateLinks" onclick="openTemplate(event, 'gems', 'template')" href="#">GEMS</a></ul>
<ul><a class="template templateLinks" onclick="openTemplate(event, 'chat', 'template')" href="#">Chat</a></ul>
</nav>
</div>
<div class="template templateContent active" id="localmajor">
Local & Major Template Content
</div>
<div class="template templateContent" id="escalation">
Escalation Template Content
</div>
<div class="template templateContent" id="afterhours">
After Hours Template Content
</div>
<div class="template templateContent" id="gems">
GEMS Template Content
</div>
<div class="template templateContent" id="chat">
Chat Template Content
</div>
</div>
</div>
<div class="mainContent" id="mails">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="mails templateLinks active" onclick="openTemplate(event, 'localoffice', 'mails')" href="#">Local Office</a></a>
</ul>
<ul><a class="mails templateLinks" onclick="openTemplate(event, 'majoraccount', 'mails')" href="#">Major Account</a></ul>
<ul><a class="mails templateLinks" onclick="openTemplate(event, 'quicklist', 'mails')" href="#">Quick List</a></ul>
<ul><a class="mails templateLinks" onclick="openTemplate(event, 'resellers', 'mails')" href="#">Resellers</a></ul>
<ul><a class="mails templateLinks" onclick="openTemplate(event, 'edc', 'mails')" href="#">EDC</a></ul>
<ul><a class="mails templateLinks" onclick="openTemplate(event, '3rdparty', 'mails')" href="#">3rd Party</a></ul>
</nav>
</div>
<div class="mails templateContent active" id="localoffice">
Local Office Mails Content
</div>
<div class="mails templateContent" id="majoraccount">
Major Account Mails Content
</div>
<div class="mails templateContent" id="quicklist">
Quick List Mails Content
</div>
<div class="mails templateContent" id="resellers">
Resellers Mails Content
</div>
<div class="mails templateContent" id="edc">
EDC Mails Content
</div>
<div class="mails templateContent" id="3rdparty">
3rd Party Mails Content
</div>
</div>
</div>
<div class="mainContent" id="ptos">
<div class="templateContainer">
<div class="templateHeader">
<nav class="templateHeaderNav">
<ul><a class="ptos templateLinks active" onclick="openTemplate(event, 'vacation', 'ptos')" href="#">Vacation</a></a>
</ul>
<ul><a class="ptos templateLinks" onclick="openTemplate(event, 'paidleave', 'ptos')" href="#">Paid Leave</a></ul>
<ul><a class="ptos templateLinks" onclick="openTemplate(event, 'sickleave', 'ptos')" href="#">Sick Leave</a></ul>
<ul><a class="ptos templateLinks" onclick="openTemplate(event, 'shiftswap', 'ptos')" href="#">Shift Swap</a></ul>
</nav>
</div>
<div class="ptos templateContent active" id="vacation">
Vacation Content
</div>
<div class="ptos templateContent" id="paidleave">
Paid Leave Content
</div>
<div class="ptos templateContent" id="sickleave">
Sick Leave Content
</div>
<div class="ptos templateContent" id="shiftswap">
Shift Swap Content
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='scripts.js'></script>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句