У меня проблемы со вторым набором кнопок/вкладок, где, когда я нажимаю другой набор кнопок, он заменяет весь раздел. Пер ⇐ Html

[Anonymous]

В моем коде сейчас есть два набора кнопок. Один управляет аналогичной, основной областью, а на одной из вкладок для основной области - ящик, предназначенный для хранения изображения. Есть также область в сторону, которая переключается с вкладками. Как мне это исправить? Где я ошибся? Честно говоря, я понятия не имею, в чем дело. Но так что я мало что знал. все. Я так потерян в этом, что провел два дня, не выполняя работу, потому что я просто не знаю, что происходит с проблемой.

Код: Выделить всё

function Tabs(evt, tabName) {
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(tabName).style.display = "block";
evt.currentTarget.className += " active";

}

document.getElementById("defaultOpen").click();< /code>
#wrapper {
width: 100%;
height: 100%;
display: inline-block;
}

#main {
color: red;
background-color: pink;
width: 52%;
height: 30rem;
margin-top: 3rem;
margin-inline: auto;
border: 6px solid;
border-color: brown;
border-radius: 15% / 38px;
padding: 4px;
}

#content {
color: rgb(0, 0, 0);
background-color: beige;
width: 96%;
height: 27rem;
position: relative;
top: 1.4rem;
margin-inline: auto;
border: 4.5px solid brown;
border-radius: 15% / 30px;
overflow: auto;
scrollbar-width: none;
}

#profileimage {
background-color: pink;
width: 16rem;
height: 25rem;
border: 2.5px solid brown;
border-radius: 15% / 15px;
position: relative;
top: 0.4rem;
}

#references {
color: red;
}

.flex-container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}

.box {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(25% - 10px);
margin: 5px;
}

img {
width: 100%;
}

.tab {
position: relative;
text-align: center;
top: 4.5rem;
}

.tab button {
background-color: burlywood;
padding: 4px;
width: 10rem;
font-size: 1.8rem;
border: 6px solid brown;
border-radius: 10% / 8px;
cursor: pointer;
color: rgb(176, 103, 66);
}

.tab2 {
position: absolute;
text-align: center;
top: 0.5rem;
left: 22rem;
}

.tab2 button {
background-color: burlywood;
width: 8rem;
font-size: 18px;
border: 3.5px solid brown;
border-radius: 10% / 8px;
cursor: pointer;
color: rgb(176, 103, 66);
}

.tab button:hover {
background-color: rgb(191, 147, 89);
color: rgb(144, 58, 32);
border: 6px solid brown;
border-radius: 10% / 8px;
}

.tab button:active {
background-color: rgb(153, 73, 51);
color: rgb(70, 21, 6);
border: 4px solid brown;
border-radius: 10% / 8px;
}

.tabcontent {
display: none;
padding: 6px 12px;
border-top:  none;
}< /code>


Profile
Ref Sheet





About
Extra

hello




[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

[img]https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/794 ... ck-the-oth