Открывать вкладку по умолчанию при загрузке страницы и оставаться на той же вкладке при нажатии кнопки или ссылки на другой вкладке - PullRequest
0 голосов
/ 25 мая 2020

Я хочу по умолчанию открывать вкладку при загрузке страницы. Пока это работает нормально. Но когда я нажимаю кнопку или ссылку на другой вкладке, я возвращаюсь на вкладку по умолчанию. Этого я не хочу. Я хочу быть уверенным, что останусь на той же вкладке после того, как нажму кнопку или ссылку на этой вкладке.

До сих пор я пробовал разные комбинации кода, но безрезультатно. Мы будем благодарны за небольшую помощь в этом отношении.

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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...