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.
Let's try out the following example to understand how it basically works:
The jQuery code in the above example simply gets the <a> element's href attribute value when a new tab has been shown using the jQuery .attr() method and save it locally in the user's browser through HTML5 localStorage object. Later, when the user refresh the page it retrieves this data and activate the related tab via Bootstrap's .tab('show') method.
Use the HTML5
localStorage
ObjectIn 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.Let's try out the following example to understand how it basically works:
The jQuery code in the above example simply gets the <a> element's href attribute value when a new tab has been shown using the jQuery .attr() method and save it locally in the user's browser through HTML5 localStorage object. Later, when the user refresh the page it retrieves this data and activate the related tab via Bootstrap's .tab('show') method.
need an explanation for this answer? contact us directly to get an explanation for this answer