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

Question

DIV＃标签ctrl

div＃page1下表显示了tab1数据

div＃page2下表显示了tab2数据

Answer 1

假设页面内容在tab元素内，您可以将选项卡设置为默认显示为none，初始页面加载会将默认选项卡设置为display block。我创造了一个快速小提琴来证明：

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");
    }
}