Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.example.com.vn/w3css/4/w3.css"> <body> <div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width: 130px"> <h5 class="w3-bar-item">Menu</h5> <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 'London')">London< /button> <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 'Paris')">Paris</button> <button class="w3-bar-item w3-button tablink " onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div style="margin-left:130px"> <div class="w3-padding">Ví dụ về tab dọc (thanh bên )</div> <div id="London" class="w3-container city" style="display:none"> <h2>London</h2> <p>London là thủ đô của nước Anh.</p > <p>Đây là thành phố đông dân nhất Vương quốc Anh, với khu vực đô thị hơn 13 triệu dân.</p> </div> <div id="Paris" class="w3-container city" style= "display:none"> <h2>Paris</h2> <p>Paris là thủ đô của Pháp.</p> <p>Khu vực Paris là một trong những trung tâm dân số lớn nhất ở châu Âu, với hơn 12 triệu dân .</p> </div> <div id="Tokyo" class="w3-container city" style="display:none"> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản. </p> <p>Đây là trung tâm của Khu vực Greater Tokyo và là khu vực đô thị đông dân nhất thế giới.</p> </div> </div> <script> function openCity(evt, cityName) { var i, x, liên kết tab; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(cityName).style.display = "chặn"; evt.currentTarget.className += " w3-red"; } </script> </body> </html>