Repository navigation
Add support for data-toggle="tab" links outside of the Tabs' Nav #18409
Description
Activity
Hi @JumpY2k3!
You appear to have posted a live example (http://jsbin.com/cotuyelive/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:
- line 14, column 7 thru column 25: Element
linot allowed as child of elementdivin this context. (Suppressing further errors from this subtree.) - line 52, column 5 thru column 40: Attribute
hrefnot allowed on elementpat this point.
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!(Please note that this is a fully automated comment.)
- line 14, column 7 thru column 25: Element
@cvrebert The example is fixed now: http://jsbin.com/nikakararo/edit?html,output
Reposting to trigger revalidation: http://jsbin.com/nikakararo/edit?html,output
Hi @cvrebert!
You appear to have posted a live example (http://jsbin.com/nikakararo/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- W002:
<head>is missing X-UA-Compatible<meta>tag that disables old IE compatibility modes - W003:
<head>is missing viewport<meta>tag that enables responsiveness
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!(Please note that this is a fully automated comment.)
- W002:
Okay, those 2 warnings should be inconsequential in this case.
@JumpY2k3 Protip: Don't hotlink to
http://getbootstrap.com/dist/...*; use BootstrapCDN instead.Tweaked example: http://jsbin.com/yafefo/1/edit?html,output
It's not valid to have
<a data-toggle="tab">links outside of the nav<ul>(such as your<a data-toggle="tab" href="#zangen">Zangen</a>within the.tab-pane) since this violates DOM structure assumptions that the Tab plugin makes.I will reinterpret this as a feature request for Bootstrap v4 to remove this limitation.
- changed the title
[-]Problems using Tabs with Navbar[/-][+]Add support for data-toggle="tab" links outside of the Tabs' Nav[/+]on Dec 3, 2015 Okay, thank you. Is there any other way to link to a nav like simulate a click to it? I want to use it in every tab-content for fast switch to correct content.
Yeah, you can either fire a synthetic click at it or use the Tab plugin's JS API to show it.
Example: http://jsbin.com/bodiwu/edit?html,outputThanks for your fast response, this seems to be a perfect solution for my problem. I will check it later on my whole page & hope that it will work fine. In case of more problems with it, I will ask here again.
PS: I don't know how to set labels here, could you set the issue on closed? Thank you 👍Leaving this open as a feature request.
Hello,
I am trying to build a webpage with a navbar and different tabs in it.
I build the following codesnippet: http://jsbin.com/nikakararo/edit?html,output
The navbar is good working, but I have one problem: When you click first to the Button "Alle", you will the the tab for this. In this is a clickable text and this should change the tab to something other. In this case it is the word "Zangen", if you click on it, you will see the tab content of "Werkzeuge -> Zangen" but the Button "Alle" is still selected. Now it is the problem, that I can't click again to "Alle" to see this tab content again. The pages thinks that "Alle" is still clicked :/
What would be the correct way to change to another tab when clicking on text or pictures or something else? Is it possible to "manipulate" the active tab in the navbar or is it possible to "simulate" a click on it? I think it would be an easy work for you, but I can't find any solution
Regards