如何使導航欄中的選項卡自動啓用？

-1

下面是導航欄的html，css和Javascript代碼。在這裏，每個導航欄的內容僅在我們點擊各自的圖標（即倫敦，巴黎，東京）時纔會顯示，但我想要第一個導航欄首先在頁面加載時顯示。下面的代碼可以做些什麼改變？ HTML代碼：如何使導航欄中的選項卡自動啓用？

<head> 
<style> 
#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
    width:100%; 
    align:center; 

} 

ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
    width: 90%; 
} 

ul.tab li {float: left;} 

ul.tab li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.tab li a:hover { 
    background-color: #ddd; 
} 

ul.tab li a:focus, .active { 
    background-color: #ccc; 
} 

.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    -webkit-animation: fadeEffect 1s; 
    animation: fadeEffect 1s; 
    padding-left: 5%; 
} 

@-webkit-keyframes fadeEffect { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeEffect { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

</style> 

<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> 
</head> 

<body> 
<center> 
<ul class="tab"> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> 
</ul> 
</center> 
<br> 
<br> 
<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    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> 
<br> 
<br> 
<div id="footer"> 
© Cities 
</div> 

</body> 
</html>

來源

2016-07-26 Kirti

[默認加載選項卡的內容（可能的重複http://stackoverflow.com/questions/38583046/tab-content - 默認情況下） –

這是一個家庭作品或東西，它是如何完全相同的：http://stackoverflow.com/q/38583046/3603806 –

請搜索之前創建新的問題。你可以讓你第一tabcontent被display.May是內嵌HTML或CSS：

.tabcontent:nth-of-type(1){display:block;}

來源

2016-07-26 10:37:21 HuyTran

如何使導航欄中的選項卡自動啓用？

回答

相關問題