javascript - 如何从一个内置于 javascript/html 的选项卡开始，而不是它是空白的并且必须点击一个

Question

你好，我有一个用 javascript/html 和 css 构建的标签系统，目前它只在你先点击它时显示任何内容，但我想知道我是否可以让标签内容在页面加载和侧边栏打开时自动显示这是使我的侧边栏工作的代码

function openTab(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";
}

here如果您想查看选项卡的行为方式，是我目前正在处理的网站吗

这是我的CSS

#tab-ul{
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006666;
width: 100%:

}

/* Float the list items side by side */
#tab-li {
float: left;
background: #006666;
border-top: 1px solid #006666;

}

/* Style the links inside the list items */
a#tab-li a {
display: inline-block;
color: black;
text-align: center;
padding-bottom:12px;
padding-top:12px;
padding-left: 7px;
padding-right: 6px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
}

 /* Change background color of links on hover */
#tab-li a:hover {
background-color: #006666;

}

/* Create an active/current tablink class */
#tab-li a:focus, .active {
background-color: darkcyan;
}

/* Style the tab content */
.tabcontent {
display: none;


}

Answer 1

找到这个特定的 html

<div id="chatrooms" class="tabcontent">

将其更改为:

<div id="chatrooms" class="tabcontent" style="display: block;">

这应该适合您。当我查看 F12 工具时，我看不到单击时类被更改，只有样式属性

对于高光定位:

<a href="#" class="tablinks" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

更改为:

<a href="#" class="tablinks active" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

请注意，active 类应该跟在“tablinks”类之后，因为您的 javascript 正在替换“active”，包括空格