Как сделать переключатель на javascript?

Запарился с этой задачей. JS не знаю.

Есть такая структура
<div class="srawnenie-wrap">
    <ul>
      <li class="krug"><a href="#">menu-1</a></li>
      <li class="krug"><a href="#" class="active-1">menu-2</a></li>
      <li class="krug"><a href="#">menu-3</a></li>
    </ul>
    <div class="srawnenie sravnit-1">
      <ul>
        <li>lorem 1</li>
        <li>lorem 1</li>
        <li>lorem 1</li>
        <li>lorem 1</li>
      </ul>
    </div>
    <div class="srawnenie sravnit-2 active-2">
      <ul>
        <li>lorem 2</li>
        <li>lorem 2</li>
        <li>lorem 2</li>
        <li>lorem 2</li>
        <li>lorem 2</li>
      </ul>
    </div>
    <div class="srawnenie sravnit-3">
      <ul>
        <li>lorem 3</li>
        <li>lorem 3</li>
        <li>lorem 3</li>
        <li>lorem 3</li>
      </ul>
    </div>
</div>


.active-1 {
  color: #d22;
}

.active-2 {
  display: block !important;
}

.srawnenie {
  display: none;
}


Нужно:
  1. Сделать, что бы по умолчанию отображалась данная в примере структура
  2. При клике на ссылку класс active-1 переходил на нажатую ссылку + класс active-2 переходил на соответствующий див


Здесь пример
codepen.io/anon/pen/KpLBaw
  • Вопрос задан
  • 894 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы