Как выделить активные пункты меню на JS?

Question

[Максим]

Вопрос заключается в том, что у меня есть вертикальное многоуровневое меню, в котором нужно выделить активный пункт меню.
Выглядит оно следующим образом:
Категории меню могут быть и активными, и неактивными, т.е. не ссылка.

> Категория меню 1 (Не ссылка, а при нажатии открывается подменю)
>> Пункт меню 1.0 (Ссылка)
>> Пункт меню 1.1 (Ссылка)
>> Пункт меню 1.2 (Ссылка)
> Категория меню 2 (Не ссылка, а при нажатии открывается подменю)
>> Пункт меню 2.0 (Ссылка)
>> Пункт меню 2.1 (Ссылка)
> Категория меню 3 (Активная ссылка, при нажатии ничего не открывается)

Как работает меню: при нажатии на категорию меню (неактивная) открывается аккордеон и мы выбираем любой пункт. После выбора пункта открывается страница на которой К категории присваивается класс active, к списку пунктов присваивается класс in (т.е. открытый), а к активному пункту меню присваивается так же класс active.
Ссылки типа "/blog", "/home" и так далее.
Прочитав, понял, что лучше реализовать всё на JS, как это проще сделать.
Прилагаю скриншот меню
c2n.me/iB3DFE

А вот сам код меню:

<!-- Typography -->
                    <li class="list-group-item list-toggle active">                   
                        <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-typography">Typography</a>
                        <ul id="collapse-typography" class="collapse in">
                            <li class="active"><a href="feature_typo_general.html"><i class="fa fa-sort-alpha-asc"></i> General Typography</a></li>
                            <li>
                                <span class="badge badge-u">New</span>
                                <a href="feature_typo_headings.html"><i class="fa fa-magic"></i> Heading Options</a>
                            </li>
                            <li>
                                <span class="badge badge-u">New</span>                            
                                <a href="feature_typo_dividers.html"><i class="fa fa-ellipsis-h"></i> Dividers</a>
                            </li>
                            <li><a href="feature_typo_blockquote.html"><i class="fa fa-quote-left"></i> Blockquote Blocks</a></li>
                            <li>
                                <span class="badge badge-u">New</span>                            
                                <a href="feature_typo_boxshadows.html"><i class="fa fa-asterisk"></i> Box Shadows</a>
                            </li>
                            <li><a href="feature_typo_testimonials.html"><i class="fa fa-comments"></i> Testimonials</a></li>                            
                            <li><a href="feature_typo_tagline_boxes.html"><i class="fa fa-tasks"></i> Tagline Boxes</a></li>
                            <li><a href="feature_typo_grid.html"><i class="fa fa-align-justify"></i> Grid Layouts</a></li>
                        </ul>
                    </li>
<!-- End Typography -->