Tab JS optimizations:

- Use jQuery.live so that even if tabs are ajaxed in they still work.
- Don't use DOM ready since this JS file is already at the bottom of the page.
- Remove selected class only on sibling tabs.
- Don't add a selected class on selected tab if it's already there (avoid hits to the DOM).
- Avoid using $(this) a lot, and instead use a saved reference, as you're creating a new jQuery object each time.
- Use '$' in front of jQuery variables so that you know they are jQuery objects.
This commit is contained in:
Mauvis Ledford 2011-07-31 12:36:20 -07:00
parent 626687a878
commit f31daea627

View File

@ -7,36 +7,27 @@
* 7/17/2011 * 7/17/2011
*/ */
/* Tabs Activiation
================================================= */
$('ul.tabs > li').live('click', function(e) {
var $tab = $(this);
var $href = $tab.find('a:first');
var $otherHrefs = $tab.siblings().find('a');
var contentLocation = $href.attr('href') + "Tab";
$(document).ready(function() { //Let go if not a hashed one
if(contentLocation[0]=="#") {
e.preventDefault();
$otherHrefs.removeClass('active');
/* Tabs Activiation //Make Tab Active
================================================== */ if (!$href.hasClass('active')){
var tabs = $('ul.tabs'); $href.addClass('active');
}
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
}); });