Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tab-Navigation - Remember user selection

Tags:

html

php

I'm using a TAB navigation for my subpage Products -> ?p=products (see code below, website is realized with HTML and PHP)

The problem:

The user clicks, for example, in the second TAB the link Details. Then he uses the back button. Now he comes back to the Product site, but not in the second tab, rather in the first.

I would like to remember the last used tab (here: href="#section-2"), if the user goes back to the product page.

How can I realize this?

<div id="tabs" class="tabs">
    <nav>
        <ul>
            <li><a href="#section-1" class="icon-cross"><span>Product 1</span></a></li>
            <li><a href="#section-2" class="icon-cross"><span>Product 2</span></a></li>
            <li><a href="#section-3" class="icon-cross"><span>Product 3</span></a></li>
            <li><a href="#section-4" class="icon-cross"><span>Product 4</span></a></li>
        </ul>
    </nav>

    <div class="content">

        <section id="section-1">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 1</strong></h2>
                <hr>
            </div>
            ...
        </section>

        <section id="section-2">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 2</strong></h2>
                <hr>
            </div>

            <a href="?p=details">Details</a>

        </section>
    </div>
</div>
like image 750
Sebastian Avatar asked May 28 '17 09:05

Sebastian


People also ask

How can I keep selected Bootstrap tab on page refresh?

Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.

How do you make a tab active in HTML?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .


2 Answers

You can use sessionStorage to store (while the user's browser is open) the last used tab and retrieve each time the page loads:

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(document).scrollTop( $(sessionStorage.getItem('lastsessionid')).offset().top );
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

EDIT: Woooow, it turned into so highly voted answer, I'll improve it. The main idea of my solution is to not reinvent the wheel about the W3C standards about anchor, not only what W3C expect (some browsers it's way ahead of those standards), but what the programming common sense expect from it. IMHO, the most important thing when you're overcoming an attribute's limitations is to try to continue their natural behavior, avoiding 'magic' features and other piece of codes that will become hard to maintain in the future. What the OP needed was to store some kind of value to use after and just that.

Other approach that would be common it's to use trigger techniques, but I strongly recommend to avoid triggers because you're simulating user's interaction unnecessarily and, sometimes, the application has other routines associated with the element's click event where can turn the use of clicking bothersome. It's true that the way I did the anchor behavior was simulated too, but, well, in the end it's my coding culture to avoid triggers to maintain the nature of event's calls:

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(sessionStorage.getItem('lastsessionid')).trigger('click');
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

To some kind of information, in the old times the web devs (I'm not so old, but I programmed before the javascript turned in so great tool into web dev. routine) couldn't rely so much on scripting techniques, so what they do to propagate some kind of behavior has store that anchor into some post/get variable and perpetuate that value until the user reaches the desired routine, forcing way through the link to load with an #{$desiredAnchor} to force the anchor behavior. Obviously it is a method that has its flaws and blind spots, but was very common when the javascript was not the big role into the industry. Some devs can need that idea when working in such small pads from department store, per example, where the pad's browsers is too old to work well with javascript ES4/ES5/ES6 new functions.

like image 173
capcj Avatar answered Sep 19 '22 14:09

capcj


Give id for each tab.Then ,

$(".icon-cross").click(function(){
    var selected_id= $(this).attr('id);
    //save this id to cookie.Then retrieve this cookie value on next page visit
})
like image 41
Dhanesh Avatar answered Sep 22 '22 14:09

Dhanesh