JavaScript - Как сделать так , что при нажатии кнопки открылся блок , а другой закрылся

Question

HTML

  <div class="wrapper">
                <div class="sections">
                <a href="#div1" class="link">Мой заявки</a><br>
                <a href="#div2" class="link">Центр сообщений</a><br>
                <a href="#div3" class="link">Мой желания</a><br>
                <a href="#div4" class="link">Мой купоны</a><br>
              </div>
              <div class="sectionscontent">
                <div class="bar" id="div1">Открывается</div>
                <div class="bar" id="div2">Закрывается</div>
                <div class="bar" id="div3">Закрывается</div>
                <div class="bar" id="div4">Закрывается</div>
              </div>
</div>

JS

$(function() {
    $('.link').on('click', function(e) {
        e.preventDefault();
        $('.bar').each(function() {
            $(this).css('display', 'none');
        });
        var block = $(this).attr('href');
        $(block).css('display', 'block');
    });
});

Не работает , а хочется чтобы при нажатии на какой то либо заголовок открывался блок , а остальные закрывались и так с остальными

Answer 1

$(".link").click(function(e){
  e.preventDefault();
  let target = $(this).attr('href');
  $(target).addClass('show')
           .siblings().removeClass('show');
});

.bar {
  display: none;
}
.bar.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sections">
    <a href="#div1" class="link">Мой заявки</a><br>
    <a href="#div2" class="link">Центр сообщений</a><br>
    <a href="#div3" class="link">Мой желания</a><br>
    <a href="#div4" class="link">Мой купоны</a><br>
  </div>
  <div class="sectionscontent">
    <div class="bar show" id="div1">Открывается</div>
    <div class="bar" id="div2">Закрывается</div>
    <div class="bar" id="div3">Закрывается</div>
    <div class="bar" id="div4">Закрывается</div>
  </div>
</div>

если вдруг используете bootstrap, то там имеются стандартные средства для этого

БЛОГ НА HUSL

JavaScript - Как сделать так , что при нажатии кнопки открылся блок , а другой закрылся

Ответы (1 шт):