如何在其他页面上的元素上添加类名称

Question

I have an image slider where the class name 'current' changes when the next and previous buttons are clicked to display the current image. I wanted to create a separate Overview page which displays all the images in a grid, then when an image is clicked you are directed to the Slider page, and the selected image has the class of 'current'. Because I can't access and add/remove the 'current' class from my Overview page, I'm not sure how to achieve the functionality I'm looking for. I'm hoping there's a way to load the Slider page and pass in a function which alters the class names on the page you're directed to.

Any help or suggestions on a different way to approach this would be appreciated.

Also, this is just using Vanilla JS. I'm relatively new and still trying to understand the basics.

Thanks!

Answer 1

The easiest solution that comes to mind is using GET parameter : https://example.com/overview?currentimage=1 . This way you include the image id in the url and can act accordingly on the overview page. This however works only as you open the new page.

If you'd like the image to change in real time on the overview page as it changes on the slider, you have to look into cookies , session , and/or HTML5 Web Storage . These allow you to store and share data across multiple pages. You update the cookie/session/storage on slider change, and then retrieve the data on the overview page with a loop that checks for changes every second or two, and updates the grid.