如何根据按钮选择隐藏和显示单个表格？

编程问答 2022-04-24

问题描述

所以，我对 Js 还是很陌生，我真的不知道我在这里做什么。我有三个链接可以隐藏/显示 3 个不同的表格。我已经让它们工作了，但是，我理想中想要的是，当点击各种链接时，它们应该隐藏其他两个未选择的表。所以，我理论上只有选择显示的表格。我不知道该怎么做。如果有人能在这里指出我正确的方向，我将永远感激。我在此处包含了我的代码。

function toggleTable1() {
  var elem = document.getElementById("loginTable1");
  var hide = elem.style.display == "none";
  if (hide) {
    elem.style.display = "table";
  } else {
    elem.style.display = "none";
  }
}

function toggleTable2() {
  var elem = document.getElementById("loginTable2");
  var hide = elem.style.display == "none";
  if (hide) {
    elem.style.display = "table";
  } else {
    elem.style.display = "none";
  }
}

function toggleTable3() {
  var elem = document.getElementById("loginTable3");
  var hide = elem.style.display == "none";
  if (hide) {
    elem.style.display = "table";
  } else {
    elem.style.display = "none";
  }
}
<html>

<head>
  <Meta charset="UTF-8">
  <title>Untitled Document</title>
</head>

<a id="loginLink1" onclick="toggleTable1();" href="#">Login1</a>
<a id="loginLink2" onclick="toggleTable2();" href="#">Login2</a>
<a id="loginLink3" onclick="toggleTable3();" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
      </th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1@2x.jpg" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1@2x.jpg" width="750" height="34" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng north</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<body>
</body>

</html>

解决方法

我会建议这样的：

function toggleTable1() {
  var elem1 = document.getElementById("loginTable1");
  var elem2 = document.getElementById("loginTable2");
  var elem3 = document.getElementById("loginTable3");
  var hide = elem.style.display === "none";
  if (hide) {
    elem1.style.display = "table";
    elem2.style.display = "none";
    elem3.style.display = "none";
  } else {
    elem1.style.display = "none";
    elem2.style.display = "none";
    elem3.style.display = "none";
  }
}
,

您需要先隐藏所有表格，然后再显示要显示的表格。 我修改了一些代码以使其更具动态性。

不多，但诚实的工作。

function hideAllTables(){
  document.getElementById("loginTable1").style.display = 'none';
  document.getElementById("loginTable2").style.display = 'none';
  document.getElementById("loginTable3").style.display = 'none';

}
function toggleTable(tableId){
    hideAllTables();
    var elem = document.getElementById(tableId)
    elem.style.display = "table";
      
}
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
    
    <a id="loginLink1" onclick="toggleTable('loginTable1');" href="#">Login1</a>
    <a id="loginLink2" onclick="toggleTable('loginTable2');" href="#">Login2</a>
    <a id="loginLink3" onclick="toggleTable('loginTable3');" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span>      </th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>
    
    <table id="loginTable2" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1@2x.jpg" width="750" height="33" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2@2x.jpg" width="750" height="35" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>
    
    <table id="loginTable3" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1@2x.jpg" width="750" height="34" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2@2x.jpg" width="750" height="35" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt=""/></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<body>
</body>
</html>

,

您应该委托并使用数据属性

我还添加了一个可以切换的类隐藏

window.addEventListener("load",function() {
  document.getElementById("nav").addEventListener("click",function(e) {
    e.preventDefault(); // stop the link
    const tgt = e.target;
    [...this.querySelectorAll("a")]
    .forEach(link => {
      document.getElementById(link.dataset.id).classList.add("hide")
    });
    document.getElementById(tgt.dataset.id).classList.remove("hide")
  })
})
.hide {
  display: none
}
<nav id="nav">
  <a data-id="loginTable1" href="#">Login1</a>
  <a data-id="loginTable2" href="#">Login2</a>
  <a data-id="loginTable3" href="#">Login3</a>
</nav>
<table id="loginTable1" width="1139" height="327" border="0">
  <thead>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
  </thead>
</table>

<table id="loginTable2" width="1139" height="327" border="0" class="hide">
  <thead>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
  </thead>
</table>

<table id="loginTable3" width="1139" height="327" border="0" class="hide">
  <thead>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
    </tr>
  </thead>
</table>

,

我认为这是您问题的确切解决方案

- 您可以向“tableList”数组添加更多表格和按钮

var tableList = [
        {
            button: document.querySelector('#loginLink1'),table: document.querySelector('#loginTable1')
        },{
            button: document.querySelector('#loginLink2'),table: document.querySelector('#loginTable2')
    },{
            button: document.querySelector('#loginLink3'),table: document.querySelector('#loginTable3')
        }
    ]
    
    function toggleTable(button) {
        for(var tableItem of tableList) {
           if(tableItem.button == button)
               tableItem.table.style.display = 'block';
           else tableItem.table.style.display = 'none';
        }
    }
    tableList.forEach(tableItem => {
      tableItem.button.addEventListener('click',function() {
        toggleTable(this);
      });
    });
<a id="loginLink1" href="#">Login1</a>
<a id="loginLink2" href="#">Login2</a>
<a id="loginLink3" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
      </th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
      </td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1@2x.jpg" width="750" height="33" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
  <tbody>
    <tr>
      <th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
    </tr>
    <tr>
      <th width="160" height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td width="84" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="309" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="364" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="200" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1@2x.jpg" width="750" height="34" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
      <td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3@2x.jpg" width="750" height="35" alt="" /></td>
      <td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
    </tr>
    <tr>
      <th height="20" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </tbody>
</table>

css-tableshtmljavascriptshow-hide