Is there a way to return to the desired tab when returning to a page showing 4 tabs using the css effect of the class selector within a page with a single url?
The 'admin_item_detail.ejs' file is currently divided into 4 div elements, The class name of each div element is 'tab none', and the id name is tab-1, tab-2, tab-3, and tab-4, respectively. Among them, the first div element has no class 'none', which means, as the name suggests, only the first div element is shown by default. Each tab already has a button to activate it, and if you press the button, only the corresponding tab is shown.
What I'm curious about is when the 3rd div element is active, when I do an additional onclick action to go to the next window('admin_payment_detail.ejs') and then hit the back button in that situation, the default first div element is showing. But I want to display the 3rd div element, which is the tab displayed just before.
If I implement a button that return to the tab-3, variable 3 is sent to the 'admin_item_detail.ejs' file and is processed by receiving it as a variable called 'curNo'.
If I click the browser's back button without clicking the button I made myself, I don't know how the value of 3 is passed so I end up showing the first div element.
// this is the html code of admin_item_detail.ejs
<div class="tab" id="tab-1">
blah blah1
</div>
<div class="tab none" id="tab-2">
blah blah2
</div>
<div class="tab none" id="tab-3">
blah blah3
</div>
<div class="tab none" id="tab-4">
blah blah4
</div>
//this is the js code of admin_item_detail.ejs
let tabs = document.getElementsByClassName('tab');
let cur_no = <%= curNo %>; //curNo is the variable that receive from server(backend)
if(!cur_no) cur_no = 0;
for(let i=0;i<tabs.length;i++){
tabs[i].classList.add('none');
}
tabs[cur_no].classList.remove('none');
//And this is the admin_payment_detail.ejs file , 3 is the variable that i want to send to the admin_item_detail.ejs file. (Server-side source code is omitted.)
<div class = "btn-create-vote">
<button style = "margin-right : 10%;" class = "btn-fill-accent" type = "button" onclick='location.href="/admin/manage/contents/detail/3"'> Back! </button>
</div>
As you can see above, it works successfully when the button is pressed, but I was wondering if there is a way to make it work even when the browser's back button is pressed without pressing the button.