這是本文件的舊版！
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px;
} .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;
} .tab button:hover {
background-color: #ddd;
} .tab button.active {
background-color: #ccc;
} .tabcontent {
float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px;
} </style> </head> <body>
<h2>Vertical Tabs</h2> <p>Click on the buttons inside the tabbed menu:</p>
<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>
<h3>London</h3> <p>London is the capital city of England.</p>
<h3>Paris</h3> <p>Paris is the capital of France.</p>
<h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p>
<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";
}
Get the element with id=“defaultOpen” and click on it document.getElementById(“defaultOpen”).click(); </script> </body>