JQuery - Переключение блоков при клике на другие блоки

414

03 октября 2017, 07:26

Есть 2 блока, вверху один активный (имеет класс active), другой нет. Есть 2 других блока ниже, со свойством display:none, но один, как можно догадаться, имеет класс, что он активный само собой отображается. Не могу разобраться в ситуации, как сделать, чтобы при нажатии на верхний не активный блок, класс active переходил с одних блоков, верхнего и нижнего, на другие не активные. Пока что разобрался, как переключать классы при клике у верхних блоков, вместе с нижними не получается.

Код на jsfiddle

Answer 1

Например так :

В теги title можно добавить data атрибут, и в нем хранить какой блок ему соответствует, далее при клике вычитываем ето значение и делаем его активным, а остальные неактивными :

$(".title").click(function(e) { 
  $(".title").removeClass('active'); 
  $(this).addClass('active'); 
 
  $('.block').removeClass('block-active'); 
  $($(this).attr('data-class')).addClass('block-active'); 
})

.title { 
  line-height: 50px; 
  border-bottom: 1px solid #eee; 
  text-align: center; 
  font-size: 30px; 
  cursor: pointer; 
  color: #eee; 
} 
 
.title.active { 
  color: #000; 
  border-bottom: 1px solid #333; 
  cursor: default; 
} 
 
.block { 
  margin-top: 10px; 
  border: 1px solid #444; 
  display: none; 
} 
 
.block.block-active { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
<div class="container"> 
  <div class="row"> 
    <div class="col-6 title active" data-class=".block-1">Блок 1</div> 
    <div class="col-6 title" data-class=".block-2">Блок 2</div> 
  </div> 
</div> 
<div class="container block block-1 block-active"> 
  <div class="row"> 
    <div class="col-4 text">Текст первого блока</div> 
    <div class="col-4 text">Еще текст первого блока</div> 
    <div class="col-4 text">И еще текст первого блока</div> 
  </div> 
</div> 
<div class="container block block-2"> 
  <div class="row"> 
    <div class="col-4 text">Текст второго блока</div> 
    <div class="col-4 text">Еще текст второго блока</div> 
    <div class="col-4 text">И еще текст второго блока</div> 
  </div> 
</div>