I have a navigation tab on my web page. And the navigation is okay, but each time I am on a particular “pane” and refresh the page, it goes back to the first pane, and does not stay on the current pane which I was seeing.
How can I make it in such a way that when I click the tab and navigate to a pane, it will stay in the pane even though I refresh the page?
For example, I have 3 panes (Pane1, pane2 and pane3). If I click and go to pane 3, and thereafter, I refresh my page, I want to still be seeing pane3, instead of returning to pane1. The same goes for all other panes, any pane I am on, should be retained even after page is refreshed.
This is my FULL HTML, CSS and Script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="stylesheet" href="style.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title>Test Page</title>
<style type="text/css">
@import url('https://fonts.cdnfonts.com/css/proxima-nova-2?styles=44818,44819,44822,44823,44817,44820,44821,44812,44813,44814,44815,44810');
@import url('https://fonts.cdnfonts.com/css/graphik?styles=44660,44666,44654,44656,44658,44662,44652,44650,44664');
body { margin: 0; }
.wrapper { display: flex; width: 100%; align-items: stretch; }
#sidebar { min-width: 200px; max-width: 200px; min-height: 100vh; top: 0; left: 0; z-index: 999; background-color: #0b2436; color: #fff; transition: all 0.3s; font-family: 'Graphik', sans-serif; }
@media screen and (min-width: 1200px) {
#content { width: 100%; }
}
@media screen and (min-width: 360px) and (max-width:640px) {
#content { width: 100%; }
}
#sidebar.active { margin-left: -200px; }
a[data-toggle="collapse"] { position: relative; background-color: #0b2436; }
#pageSubmenu { font-size: 10pt; background-color: #0b2436; font-family: 'Graphik', sans-serif; }
#pageSubmenu1 { font-size: 10pt; background-color: #0b2436; font-family: 'Graphik', sans-serif; }
.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
@media (max-width: 768px) {
#sidebar { margin-left: -200px; }
#sidebar.active { margin-left: 0; }
}
p { font-family: 'Graphik', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; }
a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; }
#sidebar { /* don't forget to add all the previously mentioned styles here too */ background-color: #0b2436; color: #fff; transition: all 0.3s; }
#topbar { background-color: #0b2436; }
#sidebar .sidebar-header { background: #0b2436; font-family: 'Graphik', sans-serif; margin: 0 auto; padding: 5px; border-bottom: 0.3px solid #404344; }
#sidebar ul.components { padding: 10px 0; }
#sidebar ul p { color: #fff; padding: 10px; font-size: medium; }
#sub-head:hover { color: #05214d; }
#navbarSupportedContent li a { color: #eeeeee; font-family: 'Graphik', sans-serif; }
#sidebar ul li a { padding: 10px; display: block; font-size: 11pt; font-family: 'Graphik', sans-serif; }
#sidebar ul li a:hover { color: #eeeeee; background-color: rgba(44, 62, 80, 0.3); }
#sidebar ul li.active > a, a[aria-expanded="true"] { color: #31b8ef; background-color: rgba(44, 62, 80, 0.3); }
.container ul li.active > a, a[aria-expanded="true"] { color: #186ea5; }
ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #0b2436; font-family: 'Graphik', sans-serif; }
#sidebarCollapse { background-color: transparent; color: #0b2436; font-size: 10pt; width: 28px; height: 28px; border: none; }
#sideCollapse { background-color: transparent; color: #0b2436; font-size: 10pt; width: 30px; height: 30px; border: none; }
.navbar navbar-expand-lg { background-color: #0b2436; }
#topnav { border-bottom: 0.5px solid #d2d2d3; }
.grid-corner { border: 0px solid #C0C0C0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: scroll; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-top: none; border-right: none; border-left: none; border-bottom: 3px solid #0b2436; background-color: transparent; font-size: 9pt; }
</style>
</head>
<body style="background-color: #fcfcfc; font-family: 'Graphik', sans-serif; font-size: 18px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
<ul class="nav navbar-nav list-unstyled components">
<li class="nav-item active" id="dash" runat="server">
<a class="nav-link" href="#">Navigation 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Navigation 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Navigation 3</a>
</li>
</ul>
<ul class="list-unstyled components">
<li class="nav-item">
<a href="#">Navigation 4</a>
</li>
</ul>
</nav>
<div id="content" style="font-size: 9pt; width: 750%;">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; background-color: #ffffff;">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle Navigation</span>
</button>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="dropdown" runat="server" style="padding: 5px;">
</li>
</ul>
</div>
</div>
</nav>
<div class="start" style="background-color: #ffffff;">
<div class="container" style="margin: 0 auto;">
<ul class="nav nav-tabs" id="myTab" role="tablist" style="font-size: 9pt;">
<li class="nav-items active">
<a class="nav-link active" id="pane1-tab" data-toggle="tab" href="#pane1" role="tab" aria-controls="pane1" aria-selected="true">Pane1</a>
</li>
<li class="nav-items active">
<a class="nav-link" id="pane2-tab" data-toggle="tab" href="#pane2" role="tab" aria-controls="pane2" aria-selected="false">pane2</a>
</li>
<li class="nav-items active">
<a class="nav-link" id="pane3-tab" data-toggle="tab" href="#pane3" role="tab" aria-controls="pane3" aria-selected="false">pane3</a>
</li>
</ul>
</div>
</div>
<div class="tab-content" id="myTabContent" style="margin-top: 2%;">
<!---Start of Clients pane---->
<div class="tab-pane container fade show active" id="pane1" role="tabpanel" aria-labelledby="pane1-tab">
<div class="card shadow p-3 mb5 bg-white rounded">
<div class="card-body" style="max-width: 100%; margin: 0 auto;">
This is Pane 1
</div>
</div>
</div>
<!---End of pane1---->
<!--Start of Pane2-->
<div class="tab-pane container fade" id="pane2" role="tabpanel" aria-labelledby="pane2-tab">
<div class="card shadow p-3 mb5 bg-white rounded">
<div class="card-body" style="max-width: 100%; margin: 0 auto;">
This is Pane 2
</div>
</div>
</div>
<!--End of Pane2-->
<!--Start of Pane3-->
<div class="tab-pane container fade" id="pane3" role="tabpanel" aria-labelledby="pane3-tab">
<div class="card shadow p-3 mb5 bg-white rounded">
<div class="card-body" style="max-width: 100%; margin: 0 auto;">
This is Pane 3
</div>
</div>
</div>
<!--End of Pane3-->
</div>
</div>
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
