कैसे करें - तत्वों को फ़िल्टर करें
किसी DIV तत्व को उसके वर्ग नाम के आधार पर फ़िल्टर करना सीखें।
फ़िल्टर डीआईवी तत्व
बीएमडब्ल्यू
संतरा
वोल्वो
लाल
अमेरिका देश का जंगली घोड़ा
नीला
बिल्ली
कुत्ता
खरबूज
कीवी
केला
नींबू
गाय
फ़िल्टर करने योग्य DIV तत्व बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<!-- Control buttons -->
<div id="myBtnContainer">
<button
class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('animals')"> Animals</button>
<button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
<button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>
<!-- The filterable elements. Note that
some have multiple class names (this can be used if they belong to multiple
categories) -->
<div
class="container">
<div
class="filterDiv cars">BMW</div>
<div class="filterDiv colors
fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars
animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv
animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv
fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.container {
overflow: hidden;
}
.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Hidden by default */
}
/* The "show" class is
added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color:
#f1f1f1;
cursor: pointer;
}
/* Add a light grey
background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to
the active button */
.btn.active {
background-color: #666;
color: white;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove
the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i],
"show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
// Show filtered
elements
function w3AddClass(element,
name) {
var i, arr1, arr2;
arr1 = element.className.split("
");
arr2 = name.split(" ");
for (i = 0; i < arr2.length;
i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.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);
}
}
element.className = arr1.join(" ");
}
// Add active class
to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns =
btnContainer.getElementsByClassName("btn");
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";
});
}