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-container"> <h2>Nhấp chuột vào bộ lọc thả xuống</h2> <p>Nhấp vào menu thả xuống và tìm kiếm một liên kết cụ thể bên trong trường nhập.</p> <div class="w3-dropdown-click"> <button class="w3-button w3-black" onclick="dropFunction()">Dropdown</ nút> <div class="w3-dropdown-content w3-bar-block w3-card w3-light-grey" id="myDIV"> <input class="w3-input w3-padding" type="text" placeholder ="Search.." id="myInput" onkeyup="filterFunction()"> <a class="w3-bar-item w3-button" href="#about">Giới thiệu</a> <a class=" w3-bar-item w3-button" href="#base">Cơ sở</a> <a class="w3-bar-item w3-button" href="#blog">Blog</a> <a class ="w3-bar-item w3-button" href="#contact">Liên hệ</a> <a class="w3-bar-item w3-button" href="#custom">Tùy chỉnh</a> < a class="w3-bar-item w3-button" href="#support">Hỗ trợ</a> <a class="w3-bar-item w3-button" href="#tools">Công cụ</a > </div> </div> </div> <script> // Hàm thả xuống dropFunction() { var x = document.getElementById("myDIV"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } // Hàm lọc filterFunction() { var input, filter, ul, li, a, i; đầu vào = document.getElementById("myInput"); bộ lọc = input.value.toUpperCase(); div = document.getElementById("myDIV"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html>