Tiêu đề cho tab
RUN
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Freetuts.net - Hướng tạo tiêu đề cho tab bằng CSS và Javascript</title> <style> 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; } /* CSS cho các tab */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } #HTML { background-color: #efc9ab; } #CSS { background-color: #f1b5e2; } #Javascript { background-color: #4ebcef; } #PHP { background-color: #d1f681; } </style> </head> <body> <p>Click vào buttons để thấy tiêu đề tab tương ứng </p> <div id="HTML" class="tabcontent"> <h3>HTML</h3> <p>HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản</p> </div> <div id="CSS" class="tabcontent"> <h3>CSS</h3> <p>CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).</p> </div> <div id="Javascript" class="tabcontent"> <h3>Javascript</h3> <p>Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website.</p> </div> <div id="PHP" class="tabcontent"> <h3>PHP</h3> <p>PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ (lập trình web).</p> </div> <button class="tablink" onclick="openLanguage('HTML', this, '#efc9ab')" id="defaultOpen">HTML</button> <button class="tablink" onclick="openLanguage('CSS', this, '#f1b5e2')">CSS</button> <button class="tablink" onclick="openLanguage('Javascript', this, '#4ebcef')">Javascript</button> <button class="tablink" onclick="openLanguage('PHP', this, '#d1f681')">PHP</button> <script> function openLanguage(languageName, 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(languageName).style.display = "block"; elmnt.style.backgroundColor = color; } // Đặt button có id = "defaultOpen" để hiển thị tự động document.getElementById("defaultOpen").click(); </script> </body> </html>
PHÓNG TO