Arthur S. Arthur S. - 4 months ago 8
Javascript Question

Run jQuery funtion for each element seperately

What do I have to add to the script to run multiple tab navigations side by side?

I have build a little tab navigation and run into problems with that, any ideas how to fix this?

Please take a look at the script below.



$(document).ready(function() {

$('ul.material--switch li').click(function() {
var tab_id = $(this).attr('data-tab');

$('ul.material--switch li').removeClass('active');
$('.tab-content').removeClass('active');

$(this).addClass('active');
$("#" + tab_id).addClass('active');
})

})

.material--switch {
list-style: none;
display: inline-block;
margin-bottom: 20px;
}
.material--switch li {
border: 1px solid #f0f0f0;
line-height: 36px;
text-align: center;
border-right: 0;
color: #6f1132;
display: inline-block;
margin-right: -4px;
}
.material--switch li.active {
border-color: #039BE5 !important;
background: #039BE5;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="material--switch">
<li class="active" data-tab="option1">option1</li>
<li data-tab="option2">option2</li>
</ul>

<div id="option1" class="tab-content active">
show option1
</div>

<div id="option2" class="tab-content">
show option2
</div>


<ul class="material--switch">
<li data-tab="option3">option3</li>
<li class="active" data-tab="option4">option4</li>
</ul>

<div id="option3" class="tab-content">
show option3
</div>

<div id="option4" class="tab-content active">
show option4
</div>




Answer

Right now your code acts against all ul.material--switch li elements as one set; your code doesn't have any indication that there are separate sets of tabs you want to act on. Here I've added a .container span around each group, to contain the tabset and its available options; your function is run separately for each .container and acts only on its contents.

$(document).ready(function() {

  $('.container').each(function() {
    var self = $(this); // in the next line `this` will get taken over by the `li`:
    self.find('.material--switch li').click(function() {
      var tab_id = $(this).attr('data-tab');
      self.find('.active').removeClass('active');
      $(this).addClass('active');
      $('#' + tab_id).addClass('active');
    });
  });
  
});
.material--switch {
  list-style: none;
  display: inline-block;
  margin-bottom: 20px;
}
.material--switch li {
  border: 1px solid #f0f0f0;
  line-height: 36px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
}
.material--switch li.active {
  border-color: #039BE5 !important;
  background: #039BE5;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="container">
  <ul class="material--switch">
    <li class="active" data-tab="option1">option1</li>
    <li data-tab="option2">option2</li>
  </ul>

  <div id="option1" class="tab-content active">option1</div>
  <div id="option2" class="tab-content">option2</div>
</span>

<span class="container">
  <ul class="material--switch">
    <li class="active" data-tab="option3">option3</li>
    <li data-tab="option4">option4</li>
  </ul>

  <div id="option3" class="tab-content active">option3</div>
  <div id="option4" class="tab-content">option4</div>
</span>

Comments