How to make bootstrap tabs remain active/selected after navigating to different web pages.

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#3) »

Bootstrap tabs gets unselected/inactive when user navigates to other page and comes back. How to make bootstrap tabs remain active/selected after navigating to different web pages.

Steps :> 1: Add class dashboard_tabs_cl to <ul>.

<!-- Nav tabs -->
<ul class="nav nav-tabs dashboard_tabs_cl" role="tablist">

2: Add javascript to the page.

<?php $this->registerJs(
				'$("document").ready(function(){
				if (typeof(Storage) !== "undefined") {
				
					var dash_localVar = localStorage.getItem("dash_activ_tab"+getUrlPath());
					if(dash_localVar){

						$(".dashboard_tabs_cl > li").removeClass("active");
						$(".tab-content > div").removeClass("active");

						var hrefAttr = "a[href="+dash_localVar+"]";
						if( $(hrefAttr).parent() ){
							$(hrefAttr).parent().addClass("active");
							$(""+dash_localVar+"").addClass("active");
						}
						
					}

					$(".dashboard_tabs_cl a").click(function (e) {
						//alert(window.location.pathname);					
						e.preventDefault();
						localStorage.setItem("dash_activ_tab"+getUrlPath(), $( this ).attr( "href" ));
					});
					function getUrlPath(){
						var returnVar = "_indexpg";
						var splitStr = window.location.href;
						var asdf = splitStr.split("?r=");
						if(asdf[1]){
							var furthrSplt = asdf[1].split("&");
							if(furthrSplt[0]){
								returnVar = furthrSplt[0];
							}else{
								returnVar = asdf[1];
							}
						}
						return returnVar;
					}
				}'
			); ?>

Done!.

1 0
3 followers
Viewed: 16 706 times
Version: Unknown (update)
Category: Tutorials
Written by: emrald
Last updated by: emrald
Created on: Oct 3, 2016
Last updated: 7 years ago
Update Article

Revisions

View all history

Related Articles