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"> <style> .city {display:none} </style> <body> <div class="w3-container"> <h2> Tab phương thức</h2> <p>Trong ví dụ này, chúng tôi thêm nội dung theo thẻ bên trong phương thức.</p> <button onclick="document.getElementById('id01').style.display='block'" class="w3 -button w3-black">Mở phương thức theo thẻ</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom" > <header class="w3-container w3-blue"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-blue w3-xlarge w3- display-topright">×</span> <h2>Tiêu đề</h2> </header> <div class="w3-bar w3-border-bottom"> <button class="tablink w3-bar-item w3 -button" onclick="openCity(event, 'London')">London</button> <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris </button> <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class= "w3-container city"> <h1>London</h1> <p>London là thành phố đông dân nhất Vương quốc Anh, với khu vực đô thị hơn 9 triệu dân.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minm veniam, quis nostrud ullamco labis nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="Paris" class="w3-container city"> <h1>Paris</h1 > <p>Paris là thủ đô của Pháp.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="Tokyo" class="w3-container city "> <h1>Tokyo</h1> <p>Tokyo là thủ đô của Nhật Bản.</p><br> </div> <div class="w3-container w3-light-grey w3-padding"> < nút class="w3-button w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display='none'">Đóng</button> </div> </div > </div> </div> <script> document.getElementsByClassName("tablink")[0].click(); hàm openCity(evt, cityName) { var i, x, tablinks; 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].classList.remove("w3-light-grey"); } document.getElementById(cityName).style.display = "chặn"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html>