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