文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >JavaScript - Tabs在Tabs

问JavaScript - Tabs在Tabs
EN

Stack Overflow用户
提问于 2020-01-12 00:23:25
回答 1查看 93关注 0票数 0

我在JavaScript上遇到了一些困难，特别是在Tabs中有Tabs。我现在有三个主表，每个里面都有另外3个子表。问题是，当我从一个子标签切换到另一个子标签，而不是从另一个主标签切换时，所有其他的子表都会关闭，直到我手动打开它们。

例如，我加载页面，默认情况下主选项卡1-SubTab 1被打开。我从主Tab 1- Sub Tab 1切换到主Tab 1- Sub Tab 2，它完全加载，但是如果我从主Tab 1切换到主Tab 2，所有主Tab 2子表都关闭，直到我手动打开它们。

下面您将找到HTML、CSS和JS以及代码片段。

HTML

代码语言：javascript
复制
<!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

代码语言：javascript
复制
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

代码语言：javascript
复制
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学校复制的，Main和Sub选项卡函数完全相同，只是使用不同的类名。我确实明白，当我从一个选项卡切换到另一个选项卡时，所有具有相同类的其他选项卡都会被隐藏，这会导致选项卡隐藏在其他主菜单中，然而，我不知道如何限制每个主选项卡的选项卡。

我为长时间的邮寄表示歉意，并提前感谢你。

​

代码语言：javascript
复制
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
复制
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;
}
代码语言：javascript
复制
<!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>

​

javascript
tabs
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-14 19:37:48

我修改了您的代码，以便它在调用openTemplate()时传递选项卡名，并且只重置与该选项卡关联的子选项卡。现在，一个选项卡内的任何交互都不会对其他选项卡产生任何影响。

我只修改了HTML和Javascript__，而没有修改CSS__。

文件

​

代码语言：javascript
复制
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";
}
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59699904

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档