System of tabs in jQuery with page reload

Navigation
0

Well guys, I put together a very simple tab system with the help of Stack people.

Well it works 100%, but there are some cases that I need to make the page refresh by clicking on tab1. I tried the following: 

onclick='location.reload();

I put the event on tab-1 but nothing happens. Does anyone know how to solve this?

Remembering that it is not for all tabs 1 to update, only in some specific cases, so I need some way to tell which tab will reload the page. 

$(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" onclick='location.reload();'>
    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>
    
asked by anonymous 16.08.2016 / 20:56

1 answer

1

Just add a switch in the click event, it should contain the current tab id, if it is the case, it does some action. 

$(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(e) {
    var tab_id = $(this).attr('data-tab');
    console.log(tab_id);
    switch(tab_id){
      case 'tab-1':
      alert('Aqui vc pode reiniciar');
        location.reload(); 
      break;
    }
    
    $('.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" onclick='location.reload();'>
    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>
    
16.08.2016 / 21:24
Footer element does not descend using the class bootstrap when I open the menu in mobile mode How to go to a url in django regardless of the way we are?