Seulgi Bear Seulgi Bear - 3 months ago 10
HTML Question

Jquery tabs enable and disable

hello everyone i am having a problem on how to disable the tab 3 when the first button is click. when i click "activate 2nd button" the 2nd tab will be enable
but the 3rd tab will enable too. it should be enable when i click "activate 3rd tab" . what should i do?

<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li><a href="#tab1">Step 1</a></li>
<li><a href="#tab2">Step 2</a></li>
<li><a href="#tab3">Step 3</a></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
this is tab 1
<button id="button2">Activate 2nd tab</button>
</div>
<div id="tab2" class="tab_content">
this is tab 2
<button id="button3">Activate 3rd tab</button>
</div>

<div id="tab3" class="tab_content">
This is tab3

</div>
</div>
</div>

</body>
<script type="text/javascript">


$(function() {

var activate = false,
tabLinks = $('.tabs a'),
tabContent = $('.tab_container').children();

tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
$('#tab2').hide();
$('#tab3').hide(); // Hide second tab




tabLinks.bind('click', function(e) {
e.preventDefault();
if(activate === true) { // Only do something if button has been clicked
var target = this.hash,
el = $(this);

tabLinks.filter('.active').removeClass('active');
el.addClass('active');

tabContent.hide(); // Hide all
$(target).show(); // Show selected
}
});

$('#button2').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link

});

$('#button3').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link
});

});
</script>
</html>

Answer

You can do something like this (using an array to know if the tab is already activated instead of only one boolean):

$(function() {


  var activate = [true, false, false],
    tabLinks = $('.tabs a'),
    tabContent = $('.tab_container').children();

  tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
  $('#tab2').hide(); // Hide second tab
  $('#tab3').hide(); // Hide second tab

  tabLinks.on('click', function(e) {
    e.preventDefault();
    var idx = $(this).data('index');
    if (activate[idx] === true) { // Only do something if button has been clicked
      var target = this.hash,
        el = $(this);

      tabLinks.filter('.active').removeClass('active');
      el.addClass('active');

      tabContent.hide(); // Hide all
      $(target).show(); // Show selected
    }
  });

  $('button').on('click', function() {
    var index = $(this).data('index');
    activate[index] = true; // Activate tab functionality
    tabLinks.eq(index).trigger('click'); // Trigger a click on the second tab link
  });

});
 * {
   padding: 0;
   margin: 0;
 }
 
 body {
   margin: 30px;
 }
 
 .tab-wrapper {
   width: 500px;
 }
 
 .tabs {
   overflow: hidden;
   list-style: none;
 }
 
 .tabs li {
   float: left;
   margin-right: 10px;
   border: 1px solid #ccc;
   border-bottom: 0;
 }
 
 .tabs a {
   display: block;
   padding: 5px;
   width: 100px;
 }
 
 .tabs a.active {
   background: #efefef;
 }
 
 .tab_container > div {
   padding: 10px;
   border: 1px solid #ccc;
 }
 
 button {
   padding: 5px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
      <ul class="tabs">
        <li><a href="#tab1" data-index="0">step1</a></li>
        <li><a href="#tab2" data-index="1">step2</a></li>
        <li><a href="#tab3" data-index="2">step3</a></li>
      </ul>
    </div>
    <div class="tab_container">
      <div id="tab1" class="tab_content">
        here is the list of the overview
        <button data-index="1">Activate 2nd tab</button>
      </div>
      <div id="tab2" class="tab_content">
        here is the list of the overview
        <button data-index="2">Activate 3nd tab</button>
      </div>
      <div id="tab3" class="tab_content">
        End
      </div>

    </div>
  </div>

</body>

You can find the code on jsfiddle too :

https://jsfiddle.net/psLshz3u/

Comments