重新加载页面后输入停留

时间:2020-09-07 00:19:59

标签: input refresh checked

在我按下按钮更改内容然后刷新页面后,它保持活动状态,并且我不知道如何解决它,因此通过刷新页面它可以再次转到第一个按钮。请帮助,如果有人知道如何解决它,谢谢!

HTML:

<div class="tabs" id="tabs">
<input type="radio" id="radio-1" name="tabs" />
<button class="tablink" onclick="openCity('new')"  id="defaultOpen"><label class="tab" for="radio-1">Най-новите</label></button>
<input type="radio" id="radio-2" name="tabs" />
<button class="tablink" onclick="openCity('popular')"><label class="tab" for="radio-2">Популярни</label></button>
<input type="radio" id="radio-3" name="tabs" checked />
<button class="tablink" onclick="openCity('upcoming')">
  <label class="tab" for="radio-3">
     Предстоящи<!--<span class="notification">25</span>-->
  </label>
 </button>
<span class="glider"></span>
</div>
<div id="new" class="games__content animated fadeIn"></div>
<div id="popular" class="games__content animated fadeIn"></div>
<div id="upcoming" class="games__content animated fadeIn"></div>

CSS:

.tabs {
display: -webkit-box;
display: flex;
position: relative;
width: 478px;
height: auto;
max-width: 100%;
background-color: var(--dark-mode-darked);
padding: 0.5em;
border-radius: 99px;
margin: 0 auto 0;
}

.tablink {
background: transparent;
cursor: pointer;
border: none;
outline: none;
}

.tabs * {
z-index: 2;
}

input[type="radio"] {
display: none;
}

.tab {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: 40px;
width: 155px;
font-size: 15px;
font-weight: 600;
border-radius: 99px;
cursor: pointer;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
position: relative;
color: var(--white);
font-family: Montserrat;
}

input[type="radio"]:checked+label {
color: var(--white);
}

input[id="radio-1"]:checked~.glider {
-webkit-transform: translateX(0);
transform: translateX(0);
}

input[id="radio-2"]:checked~.glider {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}

input[id="radio-3"]:checked~.glider {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}

.glider {
position: absolute;
display: -webkit-box;
display: flex;
height: 40px;
width: 100%;
max-width: 154.5px;
background-color: var(--dark-mode-bg);
opacity: .8;
z-index: 1;
border-radius: 99px;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}

JS:

 function openContent(contName,elmnt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("games__content");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}
document.getElementById(contName).style.display = "grid";
elmnt.style.backgroundColor = color;
var texts = document.getElementsByClassName('text');
for (var i = 0; i < texts.length; i++) {
    if (texts[i].classList.contains(contName)) {
    texts[i].classList.add('show');
  } else {
    texts[i].classList.remove('show');
  }
  }

  }

document.getElementById("defaultOpen").click();

我希望页面重新加载回到第一个按钮

0 个答案:

没有答案
相关问题