Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
<!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'; });