How to manually make a button active in bootstrap3?

Question

css

Yesterday I asked a similar question and they told me that I need to add-remove .active, but something doesn’t work for me. Here is an example on codepen show on it.
UPD: 0.0.2
I need it like in the picture. This is exactly the same navbar as on the codepen, although it is slightly different, for some reason. You can do the same but only with the help of js code. Is it some other class?
UPD:
0.0.3 Updated the link, the menb began to work the same way as in the picture. and at the same time I realized that the behavior that I want and that is, this behavior is caused by an error. After all, the fact that the letters remain selected indicates that hover does not work when the cursor leaves the navbar.

Answer 1

Well, first of all, your id's are not unique.
It will be right .
UPD
Selection is done through css. The .active and :hover classes are styled separately. For example, in your case, the color of the text changes. By the way, everything is already in the default css of the bootstrap. Here is your example .