Нужна помощь с jquery tabs

183

27 октября 2018, 12:10

Ребят, помогите пожалуйста. Есть 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'
});

Answer 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>