Подсветка выбранной ссылки

@skolm · Регистрация: 01.02.2013

Author24 — интернет-сервис помощи студентам

Привет всем, есть,так называемый, аккордеон. Т.е. вертикальный массив кнопок. При нажатии на каждую кнопку, появляется некий контент. (Пример во вложении)

Хочется с помощью js, jquery зафиксировать цвет фона и цвет текста, у выбранного пункта аккордеона. В гугле пункты меню для разных страниц выделяют, а вот как сделать чтобы без ссылок и т.д.

Если возможно, то без уничтожения абсолютно всех свойств.

P.S. Использую bootstrap 3 и следующую конструкцию:

HTML5

<div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#collapse-group" href="#test">Пункт 1</a>
                        </h4>
                    </div>
                    <div id="test" class="panel-collapse collapse out">
                        <form class="">
                            <div class="panel-body ">
                                
                                <div class="form-group ">
                                    <select class="form-control input-sm">
                                        <option></option>
                                        <option></option>
                                    </select>
                                </div>
                                <div class="form-group ">
                                    <select class="form-control input-sm">
                                        <option></option>
                                        <option></option>
                                    </select>
                                </div>
                                
                                <button class="btn btn-success pull-right">Кнопка</button>
                            </div>
                        </form>
                    </div>
                </div>

@skolm · 25.10.2016, 12:54 **[ТС]**

Помогите пожалуйста. Не у кого нет мыслей?

@j2FunOnly · 25.10.2016, 14:36

skolm, можно через jQuery обработать событие "открытия" и "закрытия" панели: show.bs.collapse и hide.bs.collapse соответственно. И, например, этим панелям добавить свой класс .my-panel, по которому будем ловыить эти события и добавлять свой класс .active к диву с .panel-heading, для которого создадим правило CSS .panel-heading.active {...}

Javascript

$('.my-panel').on('show.bs.collapse', function () {
  $(this).find('.panel-heading').addClass('active');
});
$('.my-panel').on('hide.bs.collapse', function () {
  $(this).find('.panel-heading').removeClass('active');
});

CSS

.panel-heading {
  transition: background .2s,
      color .2s;
}
  
.panel-heading.active {
    color: white;
    background-color: blue;
}

http://www.bootply.com/V5KmqNk6vK

@skolm 19 / 18 / 5 Регистрация: 01.02.2013 Сообщений: 171
	25.10.2016, 12:54 [ТС]	2
	Помогите пожалуйста. Не у кого нет мыслей? 0

	25.10.2016, 14:36

Подсветка выбранной ссылки

Решение