Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Bootstrap tabs breaking

Bootstrap tabs break if interrupted while loading

7:14 am on May 22, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
votes: 8

Recently I started using Bootstrap tabs (version 3). I noticed that tabs stop working when I click onto an inactive tab while the page is still loading. This would not happen every time, but I would need to keep switching between the pages that use tabs, and keep clicking onto inactive tabs. It would happen in 10-20% of the trials.

What happens is that the tab's HREF shows up in the URL whenever this break happens, like this:


Normally, it would be just this:

When it breaks, tab headings simply lose their link color, lines marking tabs look different (there is no bottom border below the tab title), and it is impossible to switch between the tabs without reloading the page (without the href reference at the end).

The code I use at this time is as per this example (under Markup):

This, as per explanation, should not require any additional JavaScript. The JavaScript I use on the site is basic (jQuery 1.11.2, bootstrap.js, and couple of other short scripts), and it's all close to the end of the page (to please Google's PageSpeed).

Why would this happen and what could be my options in preventing this from happening?