如何使用 HTML/CSS/Javascript 在同一页面上的内容之间切换？

Question

I want to show different content for when the user switches between different month/year options within the same page. eg I want to show the user events for the month of March 2021 if he /she chooses that option. Attached is the screenshot for reference of how I want the UI to look like.

Answer 1

As far as I know, doing this with vanilla html,css,js is pretty hard. What you can do is using a <div> for every month and use css to set all of them to display: none except the one that should be shown. Then you could attach an onclick listener to your two arrow keys. With javascript you can then make your current month <div> hidden and show your next month with display: block . You have to watch out that all your seperate month containers are position: absolute at exactly the same place.

Watch out, this is a really not ideal solution especially if you have a lot of containers.

The proper way to do this would be using something like ReactJS or you could also try Ajax . Both allow you to change part of your website without having to reload it completely.

This is just how you can do it. Don't expect anyone on the forum here to do the work for you. If you have specific questions or problems, feel free to ask but this is not a platform to get free workers.