I want to use jquery not () and toggle () to implement Filter function, but the content is not correct, as shown in the following figure
Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
.nav{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width:1200px;
margin: 100px auto;
}
.nav li{
width:120px;
height:50px;
text-align: center;
line-height: 50px;
background:-sharp333;
list-style: none;
color: -sharpfff;
}
.list{
display: flex;
justify-content: space-between;
align-content: flex-start;
flex-wrap: wrap;
width:1200px;
height:1000px;
margin: 0 auto;
}
.list li{
display: block;
width:280px;
height:200px;
background: -sharpeee;
margin: 0 0 20px 0;
list-style: none;
font-size: 24px;
text-align: center;
line-height: 200px;
}
.active{
background: -sharpff5f5f !important;
}
</style>
</head>
<body>
<ul class="nav">
<li id="A1">1</li>
<li id="A2">2</li>
<li id="A3">3</li>
<li id="A4">4</li>
</ul>
<ul class="list">
<li class="A1 A2">12</li>
<li class="A2 A4">24</li>
<li class="A3 A4">34</li>
<li class="A4 A6">46</li>
<li class="A1 A2">12</li>
<li class="A2 A3">23</li>
<li class="A1 A2">12</li>
<li class="A1 A3">13</li>
</ul>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".nav li").click(function(){
$(this).toggleClass("active");
});
$("-sharpA1").click(function(){
$(".list li").not(".A1").toggle();
});
$("-sharpA2").click(function(){
$(".list li").not(".A2").toggle();
});
$("-sharpA3").click(function(){
$(".list li").not(".A3").toggle();
});
$("-sharpA4").click(function(){
$(".list li").not(".A4").toggle();
});
});
</script>
</body>
</html>