Is there a way to activate only the desired class selector of the desired url when the back button is pressed?


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.

Source: JavaSript – Stack Overflow

November 29, 2021
Category : News
Tags: frontend | href | javascript | onclick | server

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.