如何在网页初始加载时限制不同选项卡的数据

How to restrict data of different tabs on initial load of the web page

本文关键字：选项 数据 网页 加载      更新时间：2023-09-26

div#tabCtrl

div#page1 下表显示 tab1 数据

div#page2 下表显示 tab2 数据

假设页面内容位于选项卡元素内，则可以将选项卡设置为默认不显示，并且初始页面加载会将默认选项卡设置为显示块。我创建了一个快速小提琴来演示：

https://jsfiddle.net/mnL97xtd/

<div id="tabCtrl"> <a href="#" onclick="activateTab('page1')">Tab 1</a>
<a href="#" onclick="activateTab('page2')">Tab 2</a>
<div id="page1" class="tab" style="display:none">Tab 1 Content</div>
<div id="page2" class="tab" style="display:none">Tab 2 Content</div>
</div>
<script>
    activateTab("page1");
</script>

//inside a JS file
var activateTab = function (tab) {
var tabs = document.getElementsByClassName("tab");
for (var i = 0; i < tabs.length; i++) {
    tabs[i].style.display = (tabs[i].id === tab ? "block" : "none");
    }
}
相关文章：