簡體   English   中英

JavaScript - 標簽內的標簽

[英]JavaScript - Tabs inside Tabs

我在使用 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 子選項卡都會關閉,直到我手動打開它們。

您將在下面找到 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()時傳遞選項卡名稱,並且僅重置與該選項卡關聯的子選項卡。 現在,一個選項卡內的任何交互都不會對其他選項卡產生任何影響。

我只修改了HTMLJavascript ,沒有修改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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM