<!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>Filtration</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Фильтрация элементов с помощью jQuery</h2>
<p>
<button class="f-red">Фильтр красных элементов</button>
<button class="f-blue">Фильтр синих элементов</button>
<button class="f-green">Фильтр зеленых элементов</button>
<button class="f-all">Все элементы</button>
</p>
<div class="red">Первый</div>
<div class="red">Второй</div>
<div class="blue">Третий</div>
<div class="green">Четвертый</div>
<div class="red">Пятый</div>
<div class="blue">Шестой</div>
<div class="blue">Седьмой</div>
<div class="green">Восьмой</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>body {
padding: 10%;
font-family: sans-serif; }
button {
padding: 1em;
border: 0;
margin: 0.25em;
color: #fff;
cursor: pointer; }
.f-red {
background: #ff4136; }
.f-red:hover {
background: #e90d00; }
.f-green {
background: #2ecc40; }
.f-green:hover {
background: #208e2c; }
.f-blue {
background: #0074d9; }
.f-blue:hover {
background: #004b8c; }
.f-all {
background: #333; }
.f-all:hover {
background: #0d0d0d; }
.red, .green, .blue {
color: #fff;
padding: 1em;
margin-bottom: 0.25em; }
.red {
background: #ff4136; }
.green {
background: #2ecc40; }
.blue {
background: #0074d9; }var fActive = '';
function filterColor(color){
if(fActive != color){
$('div').filter('.'+color).fadeOut();
$('div').filter(':not(.'+color+')').fadeIn();
fActive = color;
}
}
$('.f-red').click(function(){ filterColor('red'); });
$('.f-blue').click(function(){ filterColor('blue'); });
$('.f-green').click(function(){ filterColor('green'); });
$('.f-all').click(function(){
$('div').fadeOut();
fActive = 'all';
});$loop = new WP_Query("cat=10");$loop = new WP_Query("rubrika=21");