Best Way to Display Static Content on a Website?

I'm currently in the process of developing a website, in which I have a header and navigation bar with 4 links. Each of these links will display different (static) content and will be somewhat similar in styling. I have thought of these two approaches to go about doing this:

1. Create a div element for each of the link's content and use JavaScript to display the content according to the active link.
2. Create a new html page for each of the links and redirect the user to the correct page.

I believe the first approach is best as I can do everything on one page and stops the user from being redirected to different pages. However, I wonder if there is a better solution to achieving this and any potential issues I should consider (i.e. security, speed performance, efficiency, etc.) when approaching this? I'm not displaying any sensitive information and only using pure html, css and JS (no frameworks or libraries).