Tab system in jQuery with page Reload

Question

Good guys, I put together a very simple flap system, with the help of Stack’s people.

Well it works 100%, but there are some cases I need to get the page updated when bouncing in the tab1. I tried as follows:

onclick='location.reload();

I put the event in tab-1 but nothing happens. Someone knows how to solve this?

Remembering that not and for all tabs 1 update, only in some specific cases, so I need to somehow inform which tab will give Reload on 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>
<div class="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>

Answer 1

Just add a switch in the click event, this must contain the id of the current tab, if it is the chosen the case performs 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>
<div class="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>