Multiple CS Sheets or Javascript

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.

Answer 1

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.