时间戳

首页 > 解决方案 > 页面加载 HTML 上的活动选项卡问题

javascript - 页面加载 HTML 上的活动选项卡问题

问题描述

我第一次尝试前端开发，但遇到了一个小故障，它的行为不像我想象的那样。

该网站正在使用 ELO 衍生算法计算运动队的评分。

问题 1：在 EPL 游戏结果选项卡上，页面加载时应该只有“三元算法”处于活动状态，并且选项卡应该有绿色下划线。目前，初始加载时没有任何下划线，并且两个选项卡（三元和 MOV）似乎都处于活动状态。

问题 2：当您单击 MOV 算法，然后刷新页面时，我需要它只是 MOV 算法处于活动状态并带有下划线。目前，MOV 保持带下划线，但 MOV 和三元都变为活动状态。

这是jsfiddle：https ://jsfiddle.net/wa7gb43j/

function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("internalTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    x[i].style.zIndex = "0";
    x[i].style.margin = "-9999px";
  }
  document.getElementById(tabName).style.display = "block";
  document.getElementById(tabName).style.zIndex = "2000";
  document.getElementById(tabName).style.margin = "0px";
}
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */

html {
  box-sizing: border-box;
}

[type="date"] {
  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}


/* custom styles */

@media screen and (max-width: 1225px) and (min-width: 900px) {
  .priority-5 {
    display: none;
  }
}

@media screen and (max-width: 900px) and (min-width: 600px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
}

@media screen and (max-width: 600px) and (min-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
}

@media screen and (max-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
  .priority-2 {
    display: none;
  }
}

th {
  cursor: pointer;
}

label {
  display: block;
}

input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
  width: 190px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.tooltipTrigger .tooltip {
  display: none;
}

.tooltipTrigger:hover {
  cursor: pointer;
}

.tooltipTrigger:hover .tooltip {
  display: inline;
  position: absolute;
  margin-left: -50px;
  margin-top: -25px;
  font-size: 12px;
  color: #181818;
  background-color: white;
  padding: 5px;
  vertical-align: top;
  font-family: Garamond, serif;
  box-shadow: -2px 2px 5px grey;
  border: 2px solid green;
}

.tooltipTrigger2 .tooltip {
  display: none;
}

.tooltipTrigger2:hover {
  cursor: pointer;
}

.tooltipTrigger2:hover .tooltip {
  display: inline;
  position: absolute;
  margin-left: -60px;
  margin-top: 30px;
  font-size: 12px;
  color: #181818;
  background-color: white;
  padding: 5px;
  vertical-align: top;
  font-family: Garamond, serif;
  box-shadow: -2px 2px 5px grey;
  border: 2px solid green;
}

* {
  box-sizing: border-box;
}


/* Create 4 equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
  align: right;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.inlineContent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

footer {
  background: #000;
  color: #fff;
  font-size: 0.8em;
  padding: 20px;
}

.topnav {
  overflow: hidden;
  background-color: black;
  margin: auto;
  width: 25%;
  padding-top: 50px;
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
}

.topnav a {
  float: left;
  color: #fbfcfc;
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 14px;
  font-family: "Helvetica";
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #7CDCAC;
  color: white;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 30px;
}

.rankingTable {
  font-family: garamond, serif;
  border-collapse: collapse;
  background-color: white;
  color: #181818;
  width: 275%;
  margin-left: 15%;
  table-layout: fixed;
}

.rankingTable th {
  background-color: lightgrey;
  text-align: left;
}

.rankingTable thead {
  height: 65px;
}

.rankingTable td {
  text-align: center;
}

.rankingTable td,
.rankingTable th {
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
  padding: 8px;
  text-align: center;
  color: #181818;
}


}
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 60px;
  overflow: hidden;
}
.tabs [class^="tab"] label,
.tabs [class*=" tab"] label {
  color: #181818;
  cursor: pointer;
  display: block;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1em;
  padding: 2rem 0;
  text-align: center;
}
.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  border-bottom: 1px solid rgba(239, 237, 239, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs [class^="tab"] [type="radio"]:hover,
.tabs [class^="tab"] [type="radio"]:focus,
.tabs [class*=" tab"] [type="radio"]:hover,
.tabs [class*=" tab"] [type="radio"]:focus {
  border-bottom: 1px solid #008439;
}
.tabs [class^="tab"] [type="radio"]:checked,
.tabs [class*=" tab"] [type="radio"]:checked {
  border-bottom: 2px solid #008439;
}
.tabs [class^="tab"] [type="radio"]:checked+div,
.tabs [class*=" tab"] [type="radio"]:checked+div {
  opacity: 1;
}
.tabs [class^="tab"] [type="radio"]+div,
.tabs [class*=" tab"] [type="radio"]+div {
  display: block;
  opacity: 0;
  padding: 2rem 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs .tab-2 {
  width: 33%;
}
.tabs .tab-2 [type="radio"]+div {
  width: 100%;
  margin-left: 5000px;
  background-color: #ffffff;
  z-index: 0;
}
.tabs .tab-2 [type="radio"]:checked+div {
  margin-left: 0;
}
.tabs .tab-2:last-child [type="radio"]+div {
  margin-left: 0;
}
.tabs .tab-2:last-child [type="radio"]:checked+div {
  margin-left: -200%;
}
.tabs .tab-2:nth-last-child(2) [type="radio"]:checked+div {
  margin-left: -100%;
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
summary {
  display: list-item;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
progress {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline-width: 0;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
figure {
  margin: 1em 40px;
}
img {
  border-style: none;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
button,
input,
select,
textarea,
optgroup {
  font: inherit;
  margin: 0;
}
optgroup {
  font-weight: bold;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
html lang="en">

<head>

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css">
  <link rel="icon" type="image/ico" href="static/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
  <script src="https://momentjs.com/downloads/moment.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
  </script>
  <title>EPL | Br. Ba. LaB</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <!-- Navbar -->
  <div class="w3-top">
    <div class="w3-bar w3-black w3-card">
      <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right fa fa-bars" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
      <a class="w3-bar-item" style="width:5%"><img src="img\header-img2.png" style="width: 75%; min-width:22px"></a>
      <a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>
      <a href="EPL.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ENGLISH PREMIER LEAGUE</a>
      <a href="Algorithm.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ALGORITHMS</a>
    </div>
  </div>

  <!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
  <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px; z-index:3000">
    <a href="EPL.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ENGLISH PREMIER LEAUGE</a>
    <a href="Algorithm.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ALGORITHMS</a>
  </div>
  <!-- End Navbar -->

  <!-- Page content -->
  <div>
    <!--tabs sections-->
    <div class="tabs">
      <div class="tab-2"> <label for="tab2-1">EPL Standings</label> <input id="tab2-1" name="tabs-two" type="radio" checked="checked">
        <div id="content">
          <label style="width:200%; text-align:left;" for="standingsDate">Choose a date to view standings</label>
          <div style="width:200%;"><input type="date" name="standingsDate" id="standingsDate">
            <button class="w3-button w3-light-grey w3-round-medium w3-center w3-border" style="display:inline; text-align:center" id="myBtn" onclick=getStandings()>Go</button>
          </div>

          <br><br>
        </div>
      </div>
      <div class="tab-2">
        <label for="tab2-2">EPL Game Results</label> <input id="tab2-2" name="tabs-two" type="radio">
        <div id="AlgorithmTables">


          <div class="w3-bar w3-light-grey" style="min-width:600%">
            <label class="w3-bar-item w3-button" checked="checked" onclick="openTab('Ternary Algorithm')" style="padding: 10px;">Ternary Algorithm<input type="radio" name="radio">
              </label>
            <label class="w3-bar-item w3-button" onclick="openTab('MOV Algorithm')" style="padding: 10px;">MOV Algorithm<input type="radio" name="radio">
              </label>
          </div>

          <!--TERNARY ALGORITM SECTION -->
          <div id="Ternary Algorithm" class="internalTab">
            <br>
            <div>Choose a date range to filter games: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>

          </div>

          <!--MOV ALGORITM SECTION -->
          <div id="MOV Algorithm" class="internalTab">
            <br>
            <div>Choose a date range to filter games: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>
          </div>
        </div>
      </div>
      <div class="tab-2"> <label for="tab2-3">EPL History</label> <input id="tab2-3" name="tabs-two" type="radio">
        <div class="w3-responsive" style="width:300%; min-width:600px">
          <div id="dataChart" style="min-width:100%;">
            <br>
            <br>
            <div>Choose a date range to filter chart: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Page Content -->


</body>

</html>

提前感谢您的建议。

标签： javascripthtmlcssfrontend

解决方案

首先，你有太多的内联代码，这是一个不好的做法。尽可能避免使用内联样式。因此，无需更改style.display、添加/删除会在 CSS 中进行样式更改的类或属性，这样您就可以消除循环遍历元素以更改其所有样式的需要。

只是我的意思的一个快速而肮脏的例子：

function changeTab(e)
{
  document.getElementById("myTabs").dataset.active = e.target.id;
}
.tab
{
  cursor: pointer;
  border: 1px solid black;
  display: inline-block;
  padding: 0.5em;
  margin: 0;
}
.content
{
  display: none;
}

#myTabs[data-active="tab1"] #tab1,
#myTabs[data-active="tab2"] #tab2,
#myTabs[data-active="tab3"] #tab3,
#myTabs[data-active="tab4"] #tab4
{
  background-color: silver;
}
#myTabs[data-active="tab1"] #content1,
#myTabs[data-active="tab2"] #content2,
#myTabs[data-active="tab3"] #content3,
#myTabs[data-active="tab4"] #content4
{
  display: block;
}
<div id="myTabs" data-active="tab2" onclick="changeTab(event)">
  <div id="tab1" class="tab">tab 1</div>
  <div id="tab2" class="tab">tab 2</div>
  <div id="tab3" class="tab">tab 3</div>
  <div id="tab4" class="tab">tab 4</div>
  <div id="content1" class="content">content 1</div>
  <div id="content2" class="content">content 2</div>
  <div id="content3" class="content">content 3</div>
  <div id="content4" class="content">content 4</div>
</div>

所以上面的方法可以用来解决问题#1。从问题 #2 开始，您可以使用 localStorage 来存储上次选择的选项卡。

const tabs = JSON.parse(localStorage.getItem("tabs")) || {};
function openTab(input)
{
  const tabsBox = input.parentNode.parentNode.parentNode;
  tabs[tabsBox.id] = tabsBox.dataset.tab = input.dataset.tab;
  localStorage.setItem("tabs", JSON.stringify(tabs));
}

for(let id in tabs)
{
    const tabsBox = document.getElementById(id);
  if (!tabsBox)
    continue;

    tabsBox.dataset.tab = tabs[id];
  const tab = tabsBox.querySelector('input[data-tab="' + tabs[id] + '"]');
  tab && (tab.checked = true);
}
html {
  box-sizing: border-box;
}

[type="date"] {
  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}


/* custom styles */

@media screen and (max-width: 1225px) and (min-width: 900px) {
  .priority-5 {
    display: none;
  }
}

@media screen and (max-width: 900px) and (min-width: 600px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
}

@media screen and (max-width: 600px) and (min-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
}

@media screen and (max-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
  .priority-2 {
    display: none;
  }
}

th {
  cursor: pointer;
}

label {
  display: block;
}

input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
  width: 190px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.tooltipTrigger .tooltip {
  display: none;
}

.tooltipTrigger:hover {
  cursor: pointer;
}

.tooltipTrigger:hover .tooltip {
  display: inline;
  position: absolute;
  margin-left: -50px;
  margin-top: -25px;
  font-size: 12px;
  color: #181818;
  background-color: white;
  padding: 5px;
  vertical-align: top;
  font-family: Garamond, serif;
  box-shadow: -2px 2px 5px grey;
  border: 2px solid green;
}

.tooltipTrigger2 .tooltip {
  display: none;
}

.tooltipTrigger2:hover {
  cursor: pointer;
}

.tooltipTrigger2:hover .tooltip {
  display: inline;
  position: absolute;
  margin-left: -60px;
  margin-top: 30px;
  font-size: 12px;
  color: #181818;
  background-color: white;
  padding: 5px;
  vertical-align: top;
  font-family: Garamond, serif;
  box-shadow: -2px 2px 5px grey;
  border: 2px solid green;
}

* {
  box-sizing: border-box;
}


/* Create 4 equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
  align: right;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.inlineContent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

footer {
  background: #000;
  color: #fff;
  font-size: 0.8em;
  padding: 20px;
}

.topnav {
  overflow: hidden;
  background-color: black;
  margin: auto;
  width: 25%;
  padding-top: 50px;
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
}

.topnav a {
  float: left;
  color: #fbfcfc;
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 14px;
  font-family: "Helvetica";
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #7CDCAC;
  color: white;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 30px;
}

.rankingTable {
  font-family: garamond, serif;
  border-collapse: collapse;
  background-color: white;
  color: #181818;
  width: 275%;
  margin-left: 15%;
  table-layout: fixed;
}

.rankingTable th {
  background-color: lightgrey;
  text-align: left;
}

.rankingTable thead {
  height: 65px;
}

.rankingTable td {
  text-align: center;
}

.rankingTable td,
.rankingTable th {
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
  padding: 8px;
  text-align: center;
  color: #181818;
}


}
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 60px;
  overflow: hidden;
}
.tabs [class^="tab"] label,
.tabs [class*=" tab"] label {
  color: #181818;
  cursor: pointer;
  display: block;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1em;
  padding: 2rem 0;
  text-align: center;
}
.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  border-bottom: 1px solid rgba(239, 237, 239, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs [class^="tab"] [type="radio"]:hover,
.tabs [class^="tab"] [type="radio"]:focus,
.tabs [class*=" tab"] [type="radio"]:hover,
.tabs [class*=" tab"] [type="radio"]:focus {
  border-bottom: 1px solid #008439;
}
.tabs [class^="tab"] [type="radio"]:checked,
.tabs [class*=" tab"] [type="radio"]:checked {
  border-bottom: 2px solid #008439;
}
.tabs [class^="tab"] [type="radio"]:checked+div,
.tabs [class*=" tab"] [type="radio"]:checked+div {
  opacity: 1;
}
.tabs [class^="tab"] [type="radio"]+div,
.tabs [class*=" tab"] [type="radio"]+div {
  display: block;
  opacity: 0;
  padding: 2rem 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tabs .tab-2 {
  width: 33%;
}
.tabs .tab-2 [type="radio"]+div {
  width: 100%;
  margin-left: 5000px;
  background-color: #ffffff;
  z-index: 0;
}
.tabs .tab-2 [type="radio"]:checked+div {
  margin-left: 0;
}
.tabs .tab-2:last-child [type="radio"]+div {
  margin-left: 0;
}
.tabs .tab-2:last-child [type="radio"]:checked+div {
  margin-left: -200%;
}
.tabs .tab-2:nth-last-child(2) [type="radio"]:checked+div {
  margin-left: -100%;
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
summary {
  display: list-item;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
progress {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline-width: 0;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
figure {
  margin: 1em 40px;
}
img {
  border-style: none;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
button,
input,
select,
textarea,
optgroup {
  font: inherit;
  margin: 0;
}
optgroup {
  font-weight: bold;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

#AlgorithmTables .internalTab
{
  display: none;
}

#AlgorithmTables[data-tab="Ternary_Algorithm"] #Ternary_Algorithm,
#AlgorithmTables[data-tab="MOV_Algorithm"] #MOV_Algorithm
{
  display: block;
  z-index: 2000;
  margin: 0px;
}
<html lang="en">

<head>

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css">
  <link rel="icon" type="image/ico" href="static/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
  <script src="https://momentjs.com/downloads/moment.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
  </script>
  <title>EPL | Br. Ba. LaB</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <!-- Navbar -->
  <div class="w3-top">
    <div class="w3-bar w3-black w3-card">
      <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right fa fa-bars" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
      <a class="w3-bar-item" style="width:5%"><img src="img\header-img2.png" style="width: 75%; min-width:22px"></a>
      <a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>
      <a href="EPL.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ENGLISH PREMIER LEAGUE</a>
      <a href="Algorithm.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ALGORITHMS</a>
    </div>
  </div>

  <!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
  <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px; z-index:3000">
    <a href="EPL.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ENGLISH PREMIER LEAUGE</a>
    <a href="Algorithm.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ALGORITHMS</a>
  </div>
  <!-- End Navbar -->

  <!-- Page content -->
  <div>
    <!--tabs sections-->
    <div class="tabs">
      <div class="tab-2"> <label for="tab2-1">EPL Standings</label> <input id="tab2-1" name="tabs-two" type="radio" checked="checked">
        <div id="content">
          <label style="width:200%; text-align:left;" for="standingsDate">Choose a date to view standings</label>
          <div style="width:200%;"><input type="date" name="standingsDate" id="standingsDate">
            <button class="w3-button w3-light-grey w3-round-medium w3-center w3-border" style="display:inline; text-align:center" id="myBtn" onclick=getStandings()>Go</button>
          </div>

          <br><br>
        </div>
      </div>
      <div class="tab-2">
        <label for="tab2-2">EPL Game Results</label> <input id="tab2-2" name="tabs-two" type="radio">
        <div id="AlgorithmTables" data-tab="Ternary_Algorithm">


          <div class="w3-bar w3-light-grey" style="min-width:600%">
            <label class="w3-bar-item w3-button" checked="checked" style="padding: 10px;">Ternary Algorithm<input type="radio" name="radio" data-tab="Ternary_Algorithm" onclick="openTab(this)" checked>
              </label>
            <label class="w3-bar-item w3-button" style="padding: 10px;">MOV Algorithm<input type="radio" name="radio" data-tab="MOV_Algorithm" onclick="openTab(this)">
              </label>
          </div>

          <!--TERNARY ALGORITM SECTION -->
          <div id="Ternary_Algorithm" class="internalTab">
            <br>
            <div>Choose a date range to filter games: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>

          </div>

          <!--MOV ALGORITM SECTION -->
          <div id="MOV_Algorithm" class="internalTab">
            <br>
            <div>Choose a date range to filter games: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>
          </div>
        </div>
      </div>
      <div class="tab-2"> <label for="tab2-3">EPL History</label> <input id="tab2-3" name="tabs-two" type="radio">
        <div class="w3-responsive" style="width:300%; min-width:600px">
          <div id="dataChart" style="min-width:100%;">
            <br>
            <br>
            <div>Choose a date range to filter chart: </div>

            <form action="javascript: void(0);">
              <input type="text" name="value_from_start_date" data-datepicker="separateRange" /> to
              <input type="text" name="value_from_end_date" data-datepicker="separateRange" />
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Page Content -->


</body>

</html>

由于我们无法在本网站的片段中使用 localStorage，您可以在此处查看它的实际效果： https ://jsfiddle.net/vanowm/u3qfbjad/

推荐阅读