1

Добрый день. Подскажите, пожалуйста, как можно сделать закрытие вкладки при повторном нажатии? И еще один момент: как прятать блок '.bobs' при открытии любой вкладки? Спасибо большое за помощь!

$(".social_icons>a").click(function() {
        
        $(".social_icons>a").removeClass("current");
        $(this).addClass("current");
        
        $(".social_container>div").hide();
        t_content=$(this).attr("href");
        $(t_content).show('500');

        return false
    });
.social_container { width:300px; height:50px; background: chocolate; }
.social_container > div { display: none }
.social_icons > a.current { background: aqua; }
.bobs { width:100px; height:100px; background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social_icons">
    <a href="#content1">Вкладка 1</a>
    <a href="#content2">Вкладка 2</a>
    <a href="#content3">Вкладка 3</a>

    <div class="social_container">
      <div id="content1">Содержимое 1</div>
      <div id="content2">Содержимое 2</div>
      <div id="content3">Содержимое 3</div>
    </div>
</div>
<div class="bobs"></div>

1 ответ 1

1

В обработчике клика проверяйте кнопку на то, есть ли у нее класс .current или нет. Например, так:

$(".social_icons>a").click(function() {
  if (!$(this).hasClass('current')) {
    $(".social_icons>a").removeClass("current");
    $(this).addClass("current");

    $(".social_container>div").hide();
    t_content = $(this).attr("href");
    $(t_content).show('500');

    $('.bobs').hide();
  } else {
    $(this).removeClass("current");
    $(".social_container>div").hide();
    $('.bobs').show();
  }
  return false
});
.social_container {
  width: 300px;
  height: 50px;
  background: chocolate;
}

.social_container>div {
  display: none
}

.social_icons>a.current {
  background: aqua;
}

.bobs {
  width: 100px;
  height: 100px;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social_icons">
  <a href="#content1">Вкладка 1</a>
  <a href="#content2">Вкладка 2</a>
  <a href="#content3">Вкладка 3</a>

  <div class="social_container">
    <div id="content1">Содержимое 1</div>
    <div id="content2">Содержимое 2</div>
    <div id="content3">Содержимое 3</div>
  </div>
</div>
<div class="bobs"></div>

3
  • @LADYX не совсем понял что за прокрутка
    – Cheg
    3 сен 2017 в 17:06
  • @LADYX попробуйте первую строчку исправить на $(".social_icons>a").click(function(e) { и следующей строкой дописать e.preventDefault();
    – Cheg
    3 сен 2017 в 18:24
  • Судя по всем, это совершенно другая тема. Возможно, стоит задать новый вопрос, добавив воспроизводимый проблему пример. А тут вы все таки спрашивали про закрытие вкладки)
    – Cheg
    3 сен 2017 в 18:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.