<p>点击各个选项切换内容:</p>
<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>
<div id="Oslo" class="tabcontent">
    <h3>Oslo</h3>
    <p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
<style>
    body {font-family: "Lato", sans-serif;}
    
    .tablink {
        background-color: #555;
        color: white;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        font-size: 17px;
        width: 25%;
    }
    
    .tablink:hover {
        background-color: #777;
    }
    
    /* Style the tab content */
    .tabcontent {
        color: white;
        display: none;
        padding: 50px;
        text-align: center;
    }
    
    #London {background-color:red;}
    #Paris {background-color:green;}
    #Tokyo {background-color:blue;}
    #Oslo {background-color:orange;}
</style>
<script>
    function openCity(cityName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(cityName).style.display = "block";
        elmnt.style.backgroundColor = color;
    
    }
    // 触发 id="defaultOpen" click 事件
    document.getElementById("defaultOpen").click();
</script>