Я хочу по умолчанию открывать вкладку при загрузке страницы. Пока это работает нормально. Но когда я нажимаю кнопку или ссылку на другой вкладке, я возвращаюсь на вкладку по умолчанию. Этого я не хочу. Я хочу быть уверенным, что останусь на той же вкладке после того, как нажму кнопку или ссылку на этой вкладке.
До сих пор я пробовал разные комбинации кода, но безрезультатно. Мы будем благодарны за небольшую помощь в этом отношении.
HTML
<div class="tab">
<button class="tablinks" onclick="openItem(event, 'Item1')" id="defaultOpen">Item1</button>
<button class="tablinks" onclick="openItem(event, 'Item2')">Item2</button>
<button class="tablinks" onclick="openItem(event, 'Item3')">Item3</button>
</div>
<div id="Item1" class="tabcontent">
<a class="Item" onclick="setClipboard('One')">
<div class="tooltip">One
<span class="tooltiptext">This is one</span>
</div>
</a>
</div>
<div id="Item2" class="tabcontent">
<a class="Item" onclick="setClipboard('Two')">
<div class="tooltip">Two
<span class="tooltiptext">Two</span>
</div>
</a>
</div>
<div id="Item3" class="tabcontent">
<a class="Item" onclick="setClipboard('Three')">
<div class="tooltip">Three
<span class="tooltiptext">Three</span>
</div>
</a>
</div>
<span class="RevealCopiedOnClick"></span>
CSS
body {font-family: Arial;}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: none;
}
.tab button {
background-color: inherit;
float: left;
border: 1px 1px 1px 1px solid #ccc;
outline: none;
cursor: pointer;
padding: 6px 8px;
transition: 0.3s;
font-size: 40px;
}
.tab button:hover {
background-color: orange;
}
.tab button.active {
background-color: dodgerblue;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
text-align: justify;
text-justify: inter-word;
min-height: 330px;
}
.RevealCopiedOnClick {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color: rgb(255,255,255);
text-align: center;
position: fixed;
bottom: 0;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
width: auto;
display: block;
background-color: black;
animation: fadeOut 2s forwards 0s;
}
@keyframes fadeOut {
0% {opacity: 1; transform: translateY(0%);}
100% {opacity: 0; transform: translateY(0%);}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-size: 15px;
font-family: Arial;
font-weight: bold;
width: 125px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 4px 0;
margin: 5px auto;
display: flex;
flex-wrap: wrap;
position: absolute;
z-index: 1;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 33%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 0.85;
}
.Item {
font-size: 40px;
cursor: pointer;
width: 40px;
text-decoration: none;
}
Javascript
function openItem(evt, itemName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(itemName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
$(document).ready(function(){
$(".Item").click(function(){
$(".RevealCopiedOnClick").text("Copied");
$('body').html($('body').html());
});
});
function setClipboard(value) {
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = value;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}