0

Ребят, помогите пожалуйста. Есть 3 кнопки, по клику на каждую открывается одно и тоже модальное окно. Внутри окна есть табы(3 вкладки).

https://codepen.io/brezze/pen/YjBgbw

Нужно чтобы например по клику на Button 3, модально окно открывалось с активным третим табом (Содержимое 3). По клику на button 2, в модальном окне должно быть активно Содержимое 2 и так далее. спасибо

<ul class="nav">
  <li><a href="#modal">Button 1</a></li>
  <li><a href="#modal">Button 2</a></li>
  <li><a href="#modal">Button 3</a></li>
</ul>

<div class="modal mfp-hide" id="modal">
  <div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>        
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>
</div>

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
    $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
    $(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

$('.nav a').magnificPopup({
  type:'inline'
});

1 ответ 1

1

Вот как-то так

$('.tab_item').not(':first').hide();
$('.wrapper .tab').click(function() {
	$('.wrapper .tab')
    .removeClass('active')
    .eq($(this).index())
    .addClass('active');
	$('.tab_item')
    .hide()
    .eq($(this).index())
    .fadeIn();
}).eq(0).addClass('active');


$('.nav li').click(function(){
  $('.tab_item')
    .hide()
    .eq($(this).index())
    .fadeIn();
});
body, ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.nav a {
 text-decoration: none;
  color: #fff;
  display: block;
}

.nav li {
  margin: 0 25px;
  padding: 15px 30px;
  color: #fff;
  font-weight: 700;
  background-color: #5CB85C;
}

.modal {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  position: relative;
}

.tabs {
  margin-bottom: 20px;
}

.tab {
  background-color: blue;
  display: inline-block;
  vertical-align: middle;
  padding: 15px;
  margin: 0 15px;
  color: #fff;
  font-family: arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul class="nav">
  <li><a href="#modal">Button 1</a></li>
  <li><a href="#modal">Button 2</a></li>
  <li><a href="#modal">Button 3</a></li>
</ul>

<div class="modal mfp-hide" id="modal">
  <div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>        
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>
</div>

Ваш ответ

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

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