Code:

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

1000bd Online Code Preview

Code:

Run Result：