ナビゲーションバーのタブを自動で有効にするにはどうすればよいですか？

-1

以下は、ナビゲーションバーのhtml、css、Javascriptコードです。各ナビゲーションバーのコンテンツは、それぞれのアイコン（london、paris、tokyo）をクリックしたときにのみ表示されますが、ページがロードされるたびに最初に表示される最初のナビゲーションバー。このために以下のコードにどのような変更を加えることができますか？ 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 -loaded-by-default） –

これは家庭用のものなのでしょうか？まったく同じです：http://stackoverflow.com/q/38583046/3603806 –

新しい質問を作成する前に検索してください。あなたはあなたの最初のtabcontentをインラインHTMLやCSSのことdisplay.Mayであることを確認することができます[デフォルトでロードタブのコンテンツ]の

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

出典

2016-07-26 10:37:21 HuyTran

ナビゲーションバーのタブを自動で有効にするにはどうすればよいですか？

答えて

関連する問題