Как поменять класс active в btn-group?

Question

[maestro07]

Как поменять active класс?
Если active в первом btn-group и я переключаюсь в первом dropdown-menu нужно оставить active
Если active в первом btn-group и я переключаюсь на второй dropdown-menu нужно помеять active

<div class="btn-group">
    <button type="button" class="btn btn-default tab-in dropdown-toggle active" data-toggle="dropdown">
        Входящие
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" class="get-documents-btn" data-dir="in" data-type="all">Все</a></li>
        <li><a href="#" class="get-documents-btn" data-dir="in" data-type="success">Подписан</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default tab-out dropdown-toggle" data-toggle="dropdown">
Исходящие
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" class="get-documents-btn" data-dir="out" data-type="all">Все</a></li>
        <li><a href="#" class="get-documents-btn" data-dir="out" data-type="success">Подписан</a></li>
    </ul>
</div>

Answer 1

[rinatoptimus]

Попробуйте у первой кнопки удалить класс active и добавить первой кнопке класс first, а второй - класс second. Затем добавьте код:

$('.first,.second').on('click', toggleClass('active'));

Comments

[maestro07]

Не то, я же выбираю dropdown menu

[rinatoptimus]

maestro07, да, выбираете dropdown menu, и в каждом из них есть кнопка. При этом у первой изначально стоит класс актив. Я предлагаю его убрать и присваивать его при клике: кликнули на первом - стал активен первый дропдаун, кликнули на втором - стал активен второй. Или я не так понял.

[maestro07]

rinatoptimus, все верно, но вначале первый должен быть активным

[maestro07]

rinatoptimus, решил уже )) спасибо

[rinatoptimus]

maestro07, каким образом? посмотреть хочется)

[maestro07]

rinatoptimus,
if (!$('.tab-in').hasClass('active')) {
$('.tab-in').addClass('active');
$('.tab-out').removeClass('active');
}
if (!$('.tab-out').hasClass('active')) {
$('.tab-out').addClass('active');
$('.tab-in').removeClass('active');
}

[rinatoptimus]

maestro07, Благодарю!

Answer 2

[Павел Корнилов]

<ol id="ol">
  <li class="active">пункт
  </li><li>пункт
  </li><li>пункт
  </li><li>пункт
  </li><li>пункт
 </li></ol>


 <script type="text/javascript">
	var els= document.getElementById('ol');

	els.onclick= function(e) {
		[].forEach.call(this.querySelectorAll('li'), function(i) {
			i.classList.remove('active');
		})
		e.target.classList.add('active');
		e.stopPropagation();
	}

 </script>