Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2020, 13:25
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 83

Переключение классов по клику в двух блоках
Помогите плиз со скриптом, при такой структуре:

Код:
<ul id="filter">
<li><a href="#" class="one active">1</a></li>
<li><a href="#" class="two">2</a></li>
<li><a href="#" class="three">3</a></li>
<li><a href="#" class="four">4</a></li>
</ul>

<div id="block">
<div class="one visible">
<div class="one visible">
<div class="one visible">
<div class="two">
<div class="two">
<div class="two">
<div class="three">
<div class="three">
<div class="three">
<div class="four">
<div class="four">
<div class="four">
</div>
При загрузке страницы скриптом "одеваю" классы:
jQuery('#filter li a.eighteen').addClass("active");
jQuery('#block .one').addClass("visible");

Необходимо, чтобы по клику на <a> - активный класс переключался в фильтре и, соответственно visible в блоке.
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2020, 13:32
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,149

Тег «div» нужно обязательно закрывать.
<ul id="filter">
    <li><a href="#" class="one active">1</a></li>
    <li><a href="#" class="two">2</a></li>
    <li><a href="#" class="three">3</a></li>
    <li><a href="#" class="four">4</a></li>
</ul>
 
<div id="block">
    <div class="one visible">one</div>
    <div class="one visible">one</div>
    <div class="one visible">one</div>
    <div class="two">two</div>
    <div class="two">two</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="three">three</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="four">four</div>
    <div class="four">four</div>
</div>

<style>
#filter .active {color: red}
#block > div {display: none;}
#block > div.visible{display: block;}
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    var $filter = $('#filter'),
        $block = $('#block');

    $filter.on('click', 'a', function (e) {
        e.preventDefault();
        
        $filter.find('.active').removeClass('active');
        $block.find('.visible').removeClass('visible')
        $block.find('.' + this.className).addClass('visible');
        
        this.classList.add('active');
    });
</script>

Последний раз редактировалось Nexus, 13.05.2020 в 13:37.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переключение классов по клику Tipylja Общие вопросы Javascript 3 03.01.2018 19:16
По клику на кнопку менять контент сайта сразу в двух местах CraftLawrence Элементы интерфейса 3 07.01.2015 06:36
Слайдер с перемоткой в двух разных блоках Джэй jQuery 0 15.10.2012 22:08
Замена текста в блоках по клику, помогите новичку) langolier Я не знаю javascript 1 27.05.2009 03:13