如何使用Javascript默认显示第一个选项卡？

Question

我想通过默认的Active每次显示TAB1当我加载页面

脚本：

function openCity(evt, cityName) { 
    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tablinks[i].classList.remove("active"); 
    } 

    // Show the current tab, and add an "active" class to the link that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.classList.add("active"); 

} 

我只需要TAB1显示负载我怎么可以这样简单？

Answer 1

脚本

function init() { 
    reset(); 

    document.getElementsByClassName("tabcontent")[0].style.display = "block"; 
    document.getElementsByClassName("tablinks")[0].classList.add("active"); 
} 

function reset() { 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tablinks[i].classList.remove("active"); 
    } 
} 

function openCity(evt, cityName) { 
    reset(); 

    // Show the current tab, and add an "active" class to the link that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.classList.add("active"); 

} 

并调用的init（）在脚本标签。

Answer 2

您可以添加您在click事件上添加的相同规则，但仅添加到数组的第一个元素。像这样的东西应该工作（假设你要显示的元素是数组中的第一个）：

<script> 
    // Get all elements with class="tabcontent" into an array 
    tabcontent = document.getElementsByClassName("tabcontent"); 

    // display the first element of the array 
    tabcontent[0].style.display = "block"; 

    // Get all elements with class="tablinks" into an array 
    tablinks = document.getElementsByClassName("tablinks"); 

    // make first element active 
    tablinks[0].classList.add("active"); 
</script> 

而在你的HTML页面的最后