v5 - tabs required classes

[ZhangChengLin]

https://v5.getbootstrap.com/docs/5.0/components/list-group/ https://v5.getbootstrap.com/docs/5.0/components/navs/

https://github.com/twbs/bootstrap/blob/main/js/src/tab.js#L45

Why must the parent of the HTML element of the tab contain'.nav, .list-group'? If the parent of the HTML format does not contain one of these two classes, an error will be reported.

Moreover, in the document description, there is no key description, and one of these two categories must be included.

[Johann-S]

It's the same in v4 too: https://github.com/twbs/bootstrap/blob/v4.5.0/js/src/tab.js#L37

But yes our docs lack of explanation about required classes

[ZhangChengLin]

@Johann-S I was before 5.0. When using tab, the parent that did not trigger the button must have these two classes.

[ZhangChengLin]

Before 5.0, these two categories are not required.

[Johann-S]

in that case @zhangchenglin please provide two reduce test cases, one in v4.5.0 and one with v5 please which show that behavior, because the code is the same

[ZhangChengLin]

bootstrap@4.5.0/tab

bootstrap@5.0.0-alpha1/tab

For the v5 version, the console will report an error. Green is primitive and red is an example of other structures.

[Johann-S]

Thanks @zhangchenglin and good catch 👍

[rohit2sharma95]

It is not the js issue in my opinion and .nav, .list-group are required even in v4 :) @Johann-S If you see in your codepen (for v4) @zhangchenglin, the next tab is getting active that you want to do but the previously selected tab is still active. That's because the parent of the element is not .nav, .list-group. It is throwing error in v5 because the listElement is null. In v4 you are not getting the error because the code is written with jQuery and jQuery does not return null directly instead it returns a jQuery object. So you are not getting the error in the console but the purpose is not being fully achieved and the previously selected tab is not getting inactive :)

[ZhangChengLin]

It is not the js issue in my opinion and .nav, .list-group are required even in v4 :) @Johann-S If you see in your codepen (for v4) @zhangchenglin, the next tab is getting active that you want to do but the previously selected tab is still active. That's because the parent of the element is not .nav, .list-group. It is throwing error in v5 because the listElement is null. In v4 you are not getting the error because the code is written with jQuery and jQuery does not return null directly instead it returns a jQuery object. So you are not getting the error in the console but the purpose is not being fully achieved and the previously selected tab is not getting inactive :)

So if you want tabs to support structures in other formats, is it the only way to do this? They should have a common and must have class name to put in the parent element. Have you considered making the tab function independent?

[rohit2sharma95]

So if you want tabs to support structures in other formats, is it the only way to do this?

Yes @zhangchenglin, you must use .nav or .list-group class on the parent of the element. See in #31166, they are using different structure but parent element contains .nav class.

[ZhangChengLin]

So if you want tabs to support structures in other formats, is it the only way to do this?

Yes @zhangchenglin, you must use .nav or .list-group class on the parent of the element. See in #31166, they are using different structure but parent element contains .nav class.

Well, his needs are the same as mine. I didn't dare to put forward this requirement, that is, the trigger button is not in the same element (the relationship of the trigger button is the relationship of sibling elements).