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

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();

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