@Sunboyy

Как при определенном классе на странице, изменить стиль другого блока?

При клике на меню пункт получает класс .active и переходит на страницу где есть слева каталог. Нужно что бы при .cat-parent:nth-child(1).active каталог с классом .list-group менял background, к примеру на фиолетовый, а если .cat-parent:nth-child(2).active, то на голубой. Возможно ли такое сделать?
5aa4177ccbd3f897946066.png5aa417854f331089426859.png
Вот меню
ul class="product-categories">
    <li class="cat-item  active"><a href="#">Продукты</a></li>
    <li class="cat-item"><a href="#">Еда со смыслом</a></li>
    <li class="cat-item"><a href="#">Бытовая химия</a></li>
    <li class="cat-item"><a href="#">Ионизаторы Aquaspectr</a></li>
    <li class="cat-item"><a href="#">Бад</a></li>
    <li class="cat-item"><a href="#">Идеи</a></li>
</ul>

Каталог который должен менять фон
<div class='list-group' id="list-group1">
    <a href='#section10' class='list-group-item' data-toggle='collapse' data-target='#subsection10' >
        TUPPERWARE
    </a>
    <div id='subsection10' class="collapse">
        <a href='#' class='list-group-item small'>Сварочное оборудование</a>
        <a href='#' class='list-group-item small'>Электрододержатели, зажимы</a>
        <a href='#' class='list-group-item small'>Электроды</a>
    </div>
    <a href='#section14' class='list-group-item' data-toggle='collapse' data-target='#subsection14' >
        Сервировка
    </a>
    <div id='subsection14' class="collapse">
        <a href='#' class='list-group-item small'>Сварочное оборудование</a>
        <a href='#' class='list-group-item small'>Горелки для полуавтоматов</a>
        <a href='#' class='list-group-item small'>Комплектующие к горелкам</a>
        <a href='#' class='list-group-item small'>Проволока</a>
    </div>
</div>

Есть код, но он не работает если происходит переход на страницу.
var colorArray = ['blue', 'violet', 'yellow', 'red', 'green', 'grey'];
var listGroup = document.getElementById('list-group1');

$('.cat-item').click(function(event) {
    $('.cat-item').removeClass('active');
    $(this).addClass('active');
   
    listGroup.style.background = (colorArray[$(this).index()]);
});
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@Sunboyy Автор вопроса
$(document).ready(function() {
$('.cat-item').each(function() {
    var colorArray = ['blue', 'violet', 'yellow', 'red', 'green', 'grey'];
    var listGroup = document.getElementById('list-group1');
    if ($(this).hasClass('active')) {
        listGroup.style.background = (colorArray[$(this).index()]);
    }
});
});

Вот решение, может кому пригодиться
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
Atom Power!
А где #list-group1 ?
переходит на страницу где есть слева каталог

На другую страницу(т.е. другой адрес)? Или вы имели в виду, что по якорю "ныряет" к элементу с этим id ?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.