Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Tabs doesn't work #1709

Closed
dhydrated opened this Issue · 15 comments

8 participants

@dhydrated

Ive tried using the new tabs but I cant switch to next tab. Seems like the javascript doesnt fire.

@cgunther

Can you post a jsfiddle of the problem so we can see what you/ve got?

@stiopei

I had the same problem, using jquery-1.6.1.
After upgrade to jquery-1.7.1 works perfect.
So use jquery-1.7.1.

@cgunther

Yea, as it says on the docs, Bootstrap requires the latest version of jQuery.

The plugins use the new .on() event binding function, which was introduced in jQuery 1.7.

@dhydrated

Here the jsfiddle sample. I'm using jquery 1.7.1 and it still doesn't work for me. What did I do wrong?

http://jsfiddle.net/dhydrated/s7tZw/

@stiopei

You need to update and css classes.
See them in http://twitter.github.com/bootstrap/upgrading.html

@cgunther

Looks like the code example on the JS docs page for tabs is outdated. Use the code example here for reference: http://twitter.github.com/bootstrap/components.html#navs

@moollaza

@cgunther Was having the same problem, thanks a lot, the code you referenced work for me!

@dhydrated

In updated sample below, I only managed to get the Tab UI to be rendered. But I still cant switch between tabs.

Another thing is, the active tab wont be shown by default if I used the Tab javascript. It will show if I commented out the tab() call.

http://jsfiddle.net/dhydrated/UuC6c/4/

@fleeting

@dhydrated Have you tried changing your markup to what is shown in the docs here: http://twitter.github.com/bootstrap/components.html#navs?

Example, yours would look like: http://jsfiddle.net/UuC6c/6/

@huzzi

Am having same problem, will post some code later.

@PhilETaylor

@dhydrated In this example http://jsfiddle.net/dhydrated/UuC6c/4/ you are missing data-toggle="tab" on each tab - here is an updated fiddle with this working: http://jsfiddle.net/prazgod/UuC6c/8/ you also DO NOT need the JS to use the tabs, Bootstrap will set up the tabs based on the data* tags so you dont need $('#tabs').tab('show');

@PhilETaylor

@dhydrated here is an example of using the tab(show) http://jsfiddle.net/prazgod/UuC6c/9/ You need an addiitional ID on the A tag for the tab you want to show at runtime/when the .tab('show') is run.

No problems found in Bootstrap. Mainly a documentation/User knowledge issue.

@PhilETaylor

I have added more documentation and added to this pull request: #1753

@dhydrated

So Im wondering what does $().tab('show') actually do? Bcoz Im trying to avoid having all those bootstrap attributes if possible. In previous version Im able to render the Tab solely by bootstrap javascript. So in version 2 the only way to get the Tab working is via data-toggle markup.

@dhydrated dhydrated closed this
@ibrent

Ummmm yeah, that threw me for a loop. Phil's example above works. WATCH the data-toggle="tab" added to the HREF.
Thank you scripty brothas !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.