BS4 - Navs - Change active tab

Does anyone have a code sample on how to change the active(selected) tab during runtime using BS4-Navs? Kind of looks bad when a user selects a tab and it’s not highlighted or selected. (sample project does not show how).


I see what you mean. We’ll update the sample and report back.

1 Like

We just uploaded which fixes the logic on Bootstrap 4 Navs. Clicking on a tab now highlights properly.

Thanks for spotting this!

1 Like

I just tried the new version and the sample. here’s the behaviour I see:
Base Navs: not visible which item has been selected. Text of all active items is blue, disabled items grey.
Tab Style: the tab now shows the selected item. but I find the text color selection odd: the text of the non selected item is blue. The text of the selected item gets set to black/grey, same as the disabled item. or is it black and grey? if there is a difference, it’s hard to see. I find this non-intuitive, but maybe that’s as it should be?
Pill Style: selected item has a blue background, and text color is changed to white - nice.
Tested locally in Safari on Mac, and via Volt on iPad.

Yes, this is the expected behaviour:

Yesterday I modified an app, with 4 navs on 4 forms

working as expected. Each nav with 4 items as pills. The current item of each nav was highlighted.

With, today, the navs work as expected too, but only with the first use of the navs. Afterwards, when I click pill “Seite 2” being at “Seite 2”, “Seite 3” becomes highlighted and so on, i.e. click 2 highlights 3, click 3 highlights 4.

See attached screenshot.


Updating I did not get Update is Tried 3 times.

The installer was updated, but the version number was not. We’ll upload a fresh build in a few minutes.

Can your issue be reproduced in the sample?

Also, are you setting Navs.value yourself?

Hi Bernd,
The numbering of the items internally starts with 0 - not with 1. Did you take that into account?

Thank you. Definitely: yes.

@Leader: Not by own code. I use the project item property. Meanwhile I learned that the navs pills or tabs are highlighted correctly with a second click when I double click or use two clicks.
The sample is OK. One difference is that my clicks trigger change of forms.

I see. Solved. Needed to write code like this:

if (choicenav===2) {
    NavsS3.value = "2";

The Bootstrap 4 navs control did not work with iOS, at least not with my iPad Air. Recalling that one should not use a BS control when you do not really need it, because it can be done easily without BS, I deleted the navs controls in my app and replaced the navs bar with 4 buttons. This is done easily, less complicated than navigating via navs and this is working on iOS/iPad as well.