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 ! 

 

Link to comment
Share on other sites

$('#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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.