使用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>

來源

2016-11-09 Satpal Singh

添加此功能，您的腳本

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

來源

2016-11-09 04:30:11

謝謝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>

來源

2016-11-09 04:25:49 Jay

使用javascript顯示頁面加載的第一個選項卡

回答

相關問題