make bootstrap tab

make bootstrap tab

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I’m going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.

You’ll notice that there are two sections to the tabs. The first is the nav-bar ul. This is where you give each tab a title. You can even do drop downs here because they are normal Bootstrap nav items.  That’s all there is to the basic Bootstrap tabs.  They work wonders and you can see the live demo on their site here.

To make each tab load in data via AJAX you’ll need to tap into Bootstrap’s triggers.  Here’s what I did using the same example as above and the JQuery below.

The trigger is fired when the tab is changed and the is the event target, or in our case the newly activated tab.  Since the tab’s href points to the id of the element we want to change data we can use that to point our data to when it comes.  I’ve added a check to make sure we are only making the AJAX call if that tab is empty to help on load times of large data sets but you can remove that if you’d like.

That’s all there is to it.  Nothing too difficult but useful when you need tabs and need to change that data without reloading the page.  Let me know how you are using tabs below in the comments.

Loading Facebook Comments ...

3 Comments. Leave new

Hello admin, i found this post on 21 spot in google’s search
results. I’m sure that your low rankings are caused by hi bounce rate.
This is very important ranking factor. One of the biggest reason for high bounce rate is due to
visitors hitting the back button. The higher your bounce rate the further down the search results your posts and pages will
end up, so having reasonably low bounce rate is important for
increasing your rankings naturally. There is very
useful wordpress plugin which can help you. Just search in google for:

Lilas’s Bounce Plugin


Im obliged for the blog post. Awesome.

Migrom eebest8
March 25, 2015 11:32 pm

Major thankies for the blog.Really looking forward to read more. Really Great.


Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code * Time limit is exhausted. Please reload the CAPTCHA.

we have updated our price to free for all the product. Dismiss