我通过创建<button>选项卡，这些选项卡的内容是分开的，<div></div>如下所示：
function openInfo(evt, toolsName) {
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(toolsName).style.display = "block";
evt.currentTarget.className += " active";
}<button class="tablinks" onclick="openInfo(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo(event, 'Tab2')">Tab2</button>
<div id="Tab1" class="tabcontent">
<h5>Title</h5>
<div class="a">
<p>Content</p>
</div>
</div>但它默认隐藏所有内容。我希望首先默认显示 Tab1。我如何修改脚本？
<div id="Tab1" style="display: block;" class="tabcontent">
<h5>Title</h5>
<div class="a">
<p>Content</p>
</div>
</div>
<div id="Tab2" style="display: none;" class="tabcontent">
<h5>Title2</h5>
<div class="a">
<p>Content2</p>
</div>
</div>
如果添加更多选项卡，请保持它们的样式display: none。只有 tab1 会有样式display:block
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句