JS/CSS 选项卡垂直方向 - FACESOHO知行者

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8"> 
<title>JS/CSS 选项卡 垂直方向</title> 
</head>
<body>
<style>
* {box-sizing:border-box}
body {font-family:"Lato", sans-serif;}
/* Style the tab */
div.tab {float:left;border:1px solid #ccc;background-color:#f1f1f1;width:30%;height:300px;}
/* Style the buttons inside the tab */
div.tab button {display:block;background-color:inherit;color:black;padding:22px 16px;width:100%;border:none;outline:none;text-align:left;cursor:pointer;
transition:0.3s;font-size:17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {background-color:#ddd;}
/* Create an active/current "tab button" class */
div.tab button.active {background-color:#ccc;}
/* Style the tab content */
.tabcontent {float:left;padding:0px 12px;border:1px solid #ccc;width:70%;border-left:none;height:300px;}
</style>
<p>点击各个选项切换内容:</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>
<script>
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();
</script>
</body>
</html>