Запарился с этой задачей. 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;
}
Нужно:
- Сделать, что бы по умолчанию отображалась данная в примере структура
- При клике на ссылку класс active-1 переходил на нажатую ссылку + класс active-2 переходил на соответствующий див
Здесь пример
codepen.io/anon/pen/KpLBaw