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

Question

[Sunboyy]

При клике на меню пункт получает класс .active и переходит на страницу где есть слева каталог. Нужно что бы при .cat-parent:nth-child(1).active каталог с классом .list-group менял background, к примеру на фиолетовый, а если .cat-parent:nth-child(2).active, то на голубой. Возможно ли такое сделать?

Вот меню

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()]);
});

Answer 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()]);
    }
});
});

Вот решение, может кому пригодиться

Answer 2

[Andrew]

А где #list-group1 ?

переходит на страницу где есть слева каталог

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