javascript - HTML - 内容未在选项卡中正确显示
问题描述
我对前端开发非常陌生,并且在使用 HTML 中的选项卡时卡住了。我正在尝试在选项卡中显示内容,并且我能够以某种方式做到这一点,但它只有在按下任何选项卡按钮时才有效。整个内容在页面加载时显示,最终在单击选项卡按钮时显示,它工作正常。
有人可以纠正我吗?
https://jsfiddle.net/pndmyaf7/
CSS
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
.tab-content>.tab-pane {
height: 1px;
overflow: hidden;
display: block;
visibility: hidden;
}
.tab-content>.active {
height: auto;
overflow: auto;
visibility: visible;
}
HTML
<fieldset class="tab" style="margin-top: 150px ";>
<legend align="center">Exposure Breakdown</legend>
<button class="tablinks" onclick="openTab(event, 'exposure_by_asset_type')">Asset Class</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_leh_sector')">LEH Sector</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_gics_sector')">GICS Sector</button>
</fieldset>
<div id="exposure_by_asset_type" class="tab-content">
<h3>Test0</h3>
</div>
<div id="exposure_by_leh_sector" class="tab-content">
<h3>Tes1</h3>
</div>
<div id="exposure_by_gics_sector" class="tab-content">
<h3>Test2</h3>
</div>
JS
function openTab(evt, chart_id) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
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(chart_id).style.display = "block";
evt.cur`enter code here`rentTarget.className += " active";
}
解决方案
最初将内容的可见性设置为无。您可以简单地将其添加到您的 css 文件中:
.tab-content {
display: none;
}
推荐阅读
- python-3.x - Selenium Select 选项列表太长,无法选择项目
- node.js - 有什么方法可以在本机 es 模块中从根目录导入?(节点 16)
- r - R 选择了未定义的列(不是逗号问题)
- amazon-web-services - 如何从 step 函数跟踪失败和成功执行?
- pdf - 如何避免使用 Libreoffice Impress 将视频嵌入到导出的 pdf 文件中
- apache-spark - Spark - 使用堆外内存
- java - 为什么 JScrollpane 没有添加到我的 TextEditor 中的 JTextArea?
- c# - .NET Core 控制台应用程序:由于证书链中的错误,远程证书无效:UntrustedRoot
- node.js - Strapi 密码恢复 '/forgot-password' 返回 400
- css - 如何在防止恶意代码的同时让用户输入自己的 CSS?