Tab system with jQuery

Question

Tab system with jQuery

Navigation

#1 by (1 votes)

1

Galera I mounted a system of tabs using jQuery. Follow it below.

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

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

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

.tabs-container{
    margin: 0 auto;
}
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    border-bottom: 1px solid #d7d7d7;
}
ul.tabs li{
    background: none;
    color: #616161;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current{
    color: #484848;
    border-bottom: 2px solid #F65314;
}
.tab-content{
    display: none;
    padding: 15px;
}
.tab-content.current{
    display: inherit;
}
.tab-link:hover {
    color: #FBBC05;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="tabs-container">

                <ul class="tabs">
                    <li class="tab-link current" data-tab="tab-1">Tab 1</li>
                    <li class="tab-link" data-tab="tab-2">Tab 2</li>
                </ul>

                <div id="tab-1" class="tab-content current">
                bla bla bla 
                </div>
                <div id="tab-2" class="tab-content">
                    bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
                </div>
               

            </div>

Well, the system works very well, but I have the following structure:

<ul class="tabs">

Here are all the basics, and:

<div id="tab-2" class="tab-content">

Here is the contents of each tab, to facilitate wanted to change the strict to the following:

        <div class="tabs-container">

            <li class="tab-link current" data-tab="tab-1">Tab 1</li>
            <div id="tab-1" class="tab-content current">
            bla bla bla 
            </div>


            <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <div id="tab-2" class="tab-content">
                bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
            </div>


        </div>

This out whenever I was to add a new tab I just put the following:

           <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <div id="tab-2" class="tab-content">
                bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
            </div>

Could anyone help me?

javascript html jquery css

asked by anonymous 06.08.2016 / 19:12

1 answer

Controlling scroll to walk through sections of the site [closed] How to make a class or test function with pytest?

score 1 · Accepted Answer

Just a suggestion, when I make tabs I use the same structure that you use, however I create the li of navigation dynamically.

So you do not even have to add them, just go through the div.tab-content :

$('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
   .addClass(current)
   .attr('data-tab', $(this).attr('id'));
   $('ul.tabs').append(newTab)
 })

In HTML what only changed was the data-tab-title increment that defines the title of the tab to be displayed.

Result :

$(document).ready(function() {
  $('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
      .addClass(current)
      .attr('data-tab', $(this).attr('id'));
    $('ul.tabs').append(newTab)
  })

  $(document).on('click', '.tabs li', function() {
    var tab_id = $(this).attr('data-tab');

    $('.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

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

})

.tabs-container {
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 1px solid #d7d7d7;
}
ul.tabs li {
  background: none;
  color: #616161;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}
ul.tabs li.current {
  color: #484848;
  border-bottom: 2px solid #F65314;
}
.tab-content {
  display: none;
  padding: 15px;
}
.tab-content.current {
  display: block;
}
.tab-link:hover {
  color: #FBBC05;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="tabs-container">
  <ul class="tabs"></ul>
  
  <div id="tab-1" data-tab-title="Tab 1" class="tab-content current">
    bla bla bla
  </div>
  <div id="tab-2" data-tab-title="Tab 2" class="tab-content">
    bla bla bla
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
  <div id="tab-3" data-tab-title="Tab 3" class="tab-content">
    bla bla bla 2
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
</div>