Using a link in the first jQuery-CSS tab to get to the third tab and preventing tab switchback on page refresh

Question

I'm using jQuery to create a tab list; and when one of the 4 tabs are clicked, it'll take you to the content inside the hidden div. And of course, there are 4 hidden divs, one per tab.

Unfortunately, I'm a jQuery Noob, and although there are a couple of things that I'd like to get done, I don't yet possess the skills to do that. And hence, you folks visiting stackoverflow are my only hope. Could either of these be accomplished? If yes, kindly do let me know.

1. Using a link in the first tab to get to the third tab. Like so: Go to tab 3. But this doesn't work. I'm guessing there should be some kind of a function which goes like: onClick="goToThatDiv()".

2. While on tab-2, if refreshed, the page will reload with tab-1, as the first tab has the class: current. Is there anyway that one could stay on the second tab even after refreshing the page?

Here are the highlights of the code:

HTML

<!-- BEGINNING OF TABS DIV-->
<div id="tab_container">

        <!-- BEGINNING OF Tab list-->
        <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>
            <li class="tab-link" data-tab="tab-3">Tab 3</li>
            <li class="tab-link" data-tab="tab-4">Tab 4</li>
        </ul>
        <!-- END OF Tab list-->



   <div id="tab-1" class="tab-content current"><!-- BEGINNING OF CURRENT DIV-->
      // Tab 1 Content goes here.
        <a href=" // link to the 3rd tab "> To the 3rd Tab </a>
        <a href=" // link to the 4th tab "> To the 4th Tab </a>
   </div> <!-- END OF CURRENT DIV-->


   <div id="tab-2" class="tab-content"><!-- BEGINNING OF 2nd DIV-->
      // Tab 2 Content goes here.
   </div> <!-- END OF 2nd DIV-->


   <div id="tab-3" class="tab-content"><!-- BEGINNING OF 3rd DIV-->
      // Tab 3 Content here.
   </div> <!-- END OF 3rd DIV-->


   <div id="tab-4" class="tab-content"><!-- BEGINNING OF 4th DIV-->
      // Tab 4 Content here.
   </div> <!-- END OF 4th DIV-->


</div><!-- END OF TABS DIV-->    

Jquery

<script>
$(document).ready(function(){

    $('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');
    })

})
</script>

CSS

/*****************Tabs CSS**********************/


        ul.tabs{

            list-style: none;
        }
        ul.tabs li{
            background:black;
            display: inline-block;

        }

        ul.tabs li:hover {
            background: blue;

        }

        ul.tabs li.current{
            background: green;

        }

        .tab-content{
            display: none;

        }

        .tab-content.current{
            display: inherit;
        }

/*****************End of Tabs CSS**********************/

Answer 1

Yes, both of them are possible.

Solution to point 1

• You can hide all the tab contents initially, except of course the first tab.
• Then when you click on any one of the tabs, check if its data-tab matches the respective tab id. Use if else for this.
• If you want a link to do this, give it the same data-tab and the same onClick Listener.
• Now, if they match, remove the current class from the tab which has this class and add it to the new tab whose data-tab matches the tab id of the tab content sought.
• Hide all the tab contents and show only the tab content which has the class current

Solution to point 2

• When a tab is clicked, change the window's location as follows

  var href = $(this).data('tab'); window.location.hash = href

  this will behave as the url to the tab content

• Then when you reload the page, notice everything on the page resets to initial state, but the hash remains consistent.

• Now check for the tab content which matches the hash stored in the url as follows

  $('.tab-link').each(function(){ var hash = window.location.hash; var href = $(this).data('tab'); if(hash==href) { // set the current tab's class as current // hide all the tab contents and show only current tab's content } });

This can be daunting at first but once you understand it, it's pretty straightforward

Reference

https://api.jquery.com/jQuery.data/

https://developer.mozilla.org/en-US/docs/Web/API/Window.location