使用javascript显示页面加载的第一个选项卡

问题描述：

我在我的asp.net页面中有选项卡，页面加载时我只想要第一个选项卡来显示和隐藏第二个选项卡。使用javascript显示页面加载的第一个选项卡

但目前我可以看到页面加载的所有3个选项卡。

我试图隐藏JavaScript页面加载函数中的第二个选项卡，但随后我可以再次单击它来显示它。

任何帮助，将不胜感激。

这里是代码

<!DOCTYPE html> 
<html> 
<style> 

ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 


/* Style the links inside the list items */ 
ul.tab li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of links on hover */ 
ul.tab li a:hover { 
    background-color: #ddd; 
} 

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

/* Style the tab content */ 
.tabcontent { 
} 
</style> 
<body> 

<ul class="tab"> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> 
</ul> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

<script> 
function openCity(evt, cityName) { 
    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(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 
</script> 

</body> 
</html>

答

添加此功能，您的脚本

OnloadOpenCity(); 

function OnloadOpenCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 1; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 1; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "none"; 
    evt.currentTarget.className += "none"; 
}

DEMO

Codepen

谢谢Daniel！你是传奇 –

答

使用引导tabs..I会隐藏其余的选项卡

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div>

使用javascript显示页面加载的第一个选项卡

相关推荐