如何使导航栏中的选项卡自动启用？

-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

如何使导航栏中的选项卡自动启用？

回答

相关问题