Bootstrap Tabs Doesn't Work With Different Class Name

Bootstrap works fine in my js if I have $('.tabs').tabs(); But if I change that to something like $('.usertabs').tabs(); and also change the corresponding ul it doesn't work.

Solution 1:

$('.usertabs').tabs('.usertabs li > a'); 

should work assuming your code looks something like

<ul class="usertabs" data-tabs="tabs" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#menu1">menu1</a></li>
<li><a href="#menu2">menu2</a></li>
<li><a href="#menu3">menu3</a></li>
</ul>

..the reason it works is if you look at bootstrap-tabs.js v1.4.0 line 70 you'll see that the $.fn.tabs plugin/function takes in a selector as its parameter.

Btw, i think the data-tabs="tabs" is unnecessary at this point.