I have a homepage with a navigationBar on top of the Viewport contains two butto

Question

I have a homepage with a navigationBar on top of the Viewport contains two buttons.

One is the default selected home button which calls/displays home.html. The other for example is Ubuntu which calls UbuntuTutorial.html.

When home is selected, the home-buttons bottom-border is colored while the bottom-border from Ubuntu-button is transparent to show the user that he is actually at the home-section of my website

Now, from a professional view, is it a common pattern to create two nearly similar CSS where the only difference is the colored bottom-border of the clicked button (i.e home or ubuntu) or, which I would prefer, fetch the current displayed html-file and color the bottom-border of the specific button with js... avoiding multiple css where just one line differs. (But also keeping in mind that some(high amount, low amount?) of user disabled js..)

Everything is kept, in my opinion, professional. I am using external CSS and external JS-Files.

Explanation / Answer

The usual solution in this situation is to have a selected class that defines the style of a button that represents the current page - i.e. a different color for the bottom border.

When the current page changes, use JS to remove the selected class from all buttons and add it to the one that was just clicked.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.