<p>该实例设置了默认显示的选项卡，在页面载入时触发指定 id 的 click 事件。</p>

​

<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>

​

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

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";

}

​

// 触发 id="defaultOpen" click 事件

document.getElementById("defaultOpen").click();

body {font-family: "Lato", sans-serif;}

​

/* Style the tab */

div.tab {

    overflow: hidden;

    border: 1px solid #ccc;

    background-color: #f1f1f1;

}

​

/* Style the buttons inside the tab */

div.tab button {

    background-color: inherit;

    float: left;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    transition: 0.3s;

    font-size: 17px;

}

​

/* Change background color of buttons on hover */

div.tab button:hover {

    background-color: #ddd;

}

​

/* Create an active/current tablink class */

div.tab button.active {

    background-color: #ccc;

}

​

/* Style the tab content */

.tabcontent {

    display: none;

    padding: 6px 12px;

    border: 1px solid #ccc;

    border-top: none;

}