Jump to content

JS Noob: Need Help with some Bootstrap Javascript


vincej

Recommended Posts

I work with PHP and I'm not good with JS.  

 

I want to use a Twitter Boostrap tab funnction: http://getbootstrap.com/javascript/#tabs

 

I need some guidance how it uses the JS code mentioned. 

 

The code below taken from the Bootstrap page is obvious enough: 

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

What I do not understand is how I am required to use the following code in the context of the previous code. Ok, I get that I have to choose one option, but I don't get how they fit together and I do not get how I can have 5-7 tabs and how they will be highlighted one after the other as per the given example on the Bootstrap page : 

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Many thanks for all your help ! 

 

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
This is just showing ways that you can select specific tabs if you wanted to.

 

All you should need for basic tabs is this:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
This will call "show" on the tab that was clicked on.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.