Last jQuery tab element is duplicated in Safari
I have some jQuery tabs set up on the right of the page, however in Safari the last tab link is duplicated i.e. "Static Page" is shown twice. This does not occur in other browsers. Any help as to why this happening.
http://ghostpool.com/wordpress/reviewit/review/quisque-ultricies-consequat/
This is my tab code:
jQuery(document).ready(function(){
// We can use this object to reference the panels container
var panelContainer = jQuery('div#panels');
// Find panel names and create nav
// -- Loop through each panel
panelContainer.find('div.panel').each(function(n){
// For each panel, create a tab
jQuery('div#tabs-box ul').append('<li class="tab"><a href="#' + (n+1) + '">' + jQuery(this).attr('title') + '</a></li>');
});
// Determine which tab should show first based on the URL hash
var panelLocat开发者_Go百科ion = location.hash.slice(1);
if(panelLocation == '1'){
var panelNum = panelLocation;
} else if(panelLocation == '2'){
var panelNum = panelLocation;
} else if(panelLocation == '3'){
var panelNum = panelLocation;
} else if(panelLocation == '4'){
var panelNum = panelLocation;
} else if(panelLocation == '5'){
var panelNum = panelLocation;
} else if(panelLocation == '6'){
var panelNum = panelLocation;
} else if(panelLocation == '7'){
var panelNum = panelLocation;
} else if(panelLocation == '8'){
var panelNum = panelLocation;
} else if(panelLocation == '9'){
var panelNum = panelLocation;
} else if(panelLocation == '10'){
var panelNum = panelLocation;
}else{
var panelNum = '1';
}
// Hide all panels
panelContainer.find('div.panel').hide();
// Display the initial panel
panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow');
// Change the class of the current tab
jQuery('div#tabs-box ul').find('li.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');
// What happens when a tab is clicked
// -- Loop through each tab
jQuery('div#tabs-box ul').find('li').each(function(n){
// For each tab, add a 'click' action
jQuery(this).click(function(){
// Hide all panels
panelContainer.find('div.panel').hide();
// Find the required panel and display it
panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
// Give all tabs the 'tab' class
jQuery(this).parent().find('li').removeClass().addClass('tab');
// Give the clicked tab the 'tab-active' class
jQuery(this).removeClass().addClass('tab-active');
});
});
});
The find method is returning an extra element for some reason, hard to tell why based on all the HTML. A stripped down example of your page works in Safari
To fix your script, if you search for just the elements with the class panel (instead of div.panel
), it should work in Safari
panelContainer.find('.panel').each(function(n){
精彩评论