ตัวอย่างโค้ด
<!DOCTYPE html> <html> <style> .filterElements { float: left; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 20px; background-color: rgb(28, 98, 179); color: #ffffff; width: 100px; line-height: 100px; text-align: center; margin: 2px; display: none; } .show { display: block; } .container { margin-top: 20px; overflow: hidden; } .btn { border: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; outline: none; padding: 12px 16px; background-color: #d6e5ec; cursor: pointer; } .btn:hover { background-color: rgb(157, 209, 211); } .btn.active { background-color: rgb(34, 95, 228); color: white; } </style> <body> <h1>Filter DIV Elements Example</h1> <div class="filterBtns"> <button class="btn active" onclick="filterSelection('all')">Show all</button> <button class="btn" onclick="filterSelection('animals')">Animals</button> <button class="btn" onclick="filterSelection('fruits')">Fruits</button> </div> <div class="container"> <div class="filterElements fruits">Orange</div> <div class="filterElements animals">Giraffe</div> <div class="filterElements animals">Cheetah</div> <div class="filterElements animals">Lion</div> <div class="filterElements fruits">Guava</div> <div class="filterElements animals">Dog</div> <div class="filterElements fruits">Banana</div> <div class="filterElements fruits">Mango</div> <div class="filterElements animals">Bull</div> </div> <script> filterSelection("all"); function filterSelection(c) { var x, i; x = document.querySelectorAll(".filterElements"); if (c == "all") c = ""; Array.from(x).forEach(item => { removeActiveClass(item, "show"); if (item.className.indexOf(c) > -1) addActiveClass(item, "show"); }); } function addActiveClass(ele, name) { var i, arr1, arr2; arr1 = ele.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) { ele.className += " " + arr2[i]; } } } function removeActiveClass(ele, name) { var i, arr1, arr2; arr1 = ele.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } ele.className = arr1.join(" "); } var filterBtns = document.querySelector(".filterBtns"); var btns = filterBtns.getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html>
ผลลัพธ์
โค้ดข้างต้นจะให้ผลลัพธ์ดังนี้ -
เมื่อคลิกปุ่มกรองข้อมูลใดๆ -
