Как менять отображение блоков в зависимости от элемента по которому произошел клик?

Question

[sunnyrio]

Есть 7 элементов и 7 блоков 6 из которых скрыты и 1 отображается. Как сделать чтобы при нажатии на один из 7 элементов отображался один из блоков при этом другие блоки должны быть скрыты.

<div>
     <div id="el1">элемент1</div>
     <div id="el2">элемент2</div>
     <div id="el3">элемент3</div>
     <div id="el4">элемент4</div>
     <div id="el5">элемент5</div>
     <div id="el6">элемент6</div>
     <div id="el7">элемент7</div>
</div>
<div>
     <div id="container1">содержимое1</div>
     <div id="container2">содержимое2</div>
     <div id="container3">содержимое3</div>
     <div id="container4">содержимое4</div>
     <div id="container5">содержимое5</div>
     <div id="container6">содержимое6</div>
     <div id="container7">содержимое7</div>
</div>

Comments

[Exploding]

Примеров с табами в сети наверно мильярдионы...

Answer 1

[Евгений Кылин]

<div>
     <div class="el" el="1">элемент1</div>
     <div class="el" el="2">элемент2</div>
</div>
<div>
     <div class="container" container="1">содержимое1</div>
     <div class="container" container="2">содержимое2</div>
</div>

$('.el').onClick((this) => {
   let n $(this).attr('el')
   $('.container').hide()
   $('.container[container="'+ n +'"]').show()
})

Comments

[sunnyrio]

=> { let n $(this).attr('el')
Вот это немного непонятно

[Евгений Кылин]

sunnyrio, есть у .el атрибут el, его сравниваем с атрибутом contaiter.
let n $(this).attr('el') - тут просто получаем значение атрибута