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!.