Setting active tab javascript

Question

I have been trying to go about setting my page's active tab. It is weird, cause I can manually set the active tab like the following:

<div class="tabs">
        <ul class="tab-links">
            <li id="t1" class="active"><a href="#tab1">TAB</a></li>  //setting it here works
            <li id="t2"><a href="#tab2">TAB</a></li>
            <li id="t3"><a href="#tab3">TAB</a></li>
            <li id="t4"><a href="#tab4">TAB</a></li>
            <li id="t5"><a href="#tab5">TAB</a></li>
            <li id="t6"><a href="#tab6">TAB</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab1.html");    ?>
            </div>
            <div id="tab2" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab2.html");    ?>
            </div>
            <div id="tab3" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab3.php");    ?>
            </div>
            <div id="tab4" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab4.php");    ?>
            </div>
            <div id="tab5" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab5.html");    ?>
            </div>
            <div id="tab6" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab6.html");    ?>
            </div>
        </div>

However, when I try to set it like this nothing happens:

<script language="javascript" type="text/javascript">

    //setting the tabIndex to the stored value.
    $(".tab-links").tabs({active: tabIndex}); //need to change this somehow
    var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
    console.log("local storage value of tabIndex parseInt: " + tabIndex);
    if(tabIndex != null){
        console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
        $(document).on("click", ".tabs > ul > li:nth-child(" + tabIndex + ") a", function(e) {});
        //$(".tabs").tabs({
            //  active: tabIndex 
        //});
    }

    //storing the last tab index before page refresh
    $(document).on("click", ".tab-links a", function(e) {
          $('.active').removeClass('active');
          $(this).parent().addClass('active');
          var curTab = $('.tab-links').find('.active')[0].id;
          console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
          var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
          localStorage.setItem('activeTab', curTabIndex);
    });

</script>

Am I missing something here? I just need to somehow set the tabIndex to become the active tab on page refresh.

I was looking online they were saying that is how you set an active tab with the $().tabs({active:1}) — tiger_groove
– tiger_groove, Commented Aug 15, 2017 at 23:20

Mikey · Accepted Answer · 2017-08-15 23:47:54Z

2

Here's one way without using any jQuery libraries except for jQuery.

We use localStorage to store the #hash. Upon refresh of the page, we check if there is a hash and use it to find the link that uses it.

$(function () {
    $(document).on('click', '.tab-links a', function () {
        var link = $(this), 
            listItem = link.parent(), 
            content = $(link.attr('href'));
        // show current link and content
        listItem.add(content).addClass('active');
        // hide other links and contents
        listItem.siblings().add(content.siblings()).removeClass('active');
        // save selected tab e.g. #tab1. #tab2, ...
        localStorage.setItem('activeTab', link.attr('href'));
    });
    // go back to last tab if any
    var activeTab = localStorage.getItem('activeTab'); // ex. #tab1, #tab2, ...
    if (activeTab) {
        $('.tab-links a[href="' + activeTab + '"]').click();
    }
})

Ensure that the content is shown only when active

 .tab {
     display: none;
 }
 .tab.active {
     display: block;
 }

Ensure that the first tab is active by default

 <li id="t1" class="active"><a href="#tab1">TAB</a></li>

 <div id="tab1" class="tab active" style="font-family: 'Open Sans', sans-serif;">

edited Aug 15, 2017 at 23:47

answered Aug 15, 2017 at 23:23

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tiger_groove Over a year ago

sorry, i added my complete script for clarification, I already have an index stored, and on page refresh, i can get the correct stored index. I just need to set the active class to the value of the stored index. I tried to do this with just the number 1 and it didn't do it. Please see my updated script above.

Mikey Over a year ago

@kkmoslehpour It's easier to store the href, or better the id, of the selected link rather than it's index.

tiger_groove Over a year ago

that did it. Thank you for the detailed explanation.

Matthew Barbara · Accepted Answer · 2017-08-15 23:20:14Z

0

I haven't read any documentation from where the tab function is coming from since you did not specify but like anything else, this is hackable. All you need to do is to move the CSS class active when you click a tab.

The following JQuery code might work for you:

$('ul.tab-links li').on('click', function(){
    $('li.active').removeClass('active'); // to remove the current active tab
    $(this).addClass('active'); // add active class to the clicked tab
});

answered Aug 15, 2017 at 23:20

Matthew Barbara

3,9822 gold badges24 silver badges34 bronze badges

1 Comment

tiger_groove Over a year ago

sorry, i added my complete script for clarification, I already have an index stored, and on page refresh, i can get the correct stored index. I just need to set the active class to the value of the stored index. I tried to do this with just the number 1 and it didn't do it. Please see my updated script above.

Michael Horn · Accepted Answer · 2017-08-15 23:48:31Z

Edit

Also in the docs, it mentions that if you want to set the active tab after initialization you could do so with

$('.selector').tabs("option", "active", 1)

So in your case:

$(".tab-links").tabs("option", "active", tabIndex);

If I'm reading the docs correctly, the tabs should be initialized using the outer div:

$('.tabs').tabs({active: 1});

Also, it looks like the tab-content divs should be on the same level as the ul element.

Here is the sample code they used:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Collectives™ on Stack Overflow

Setting active tab javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related