jQuery if hasClass action
I have made this fiddle:
http://jsfiddle.net/4CtLV/
Now, what i'm trying to do, is if a tab has selectedTab as its class, then show the corresponding div. I've set up the if statement but am unsure where to go from here,
Any help appreciated!
Have a look at this revision.
I have factored out the code to show a tab into a function showTab
:
var showTab = function(id) {
$tab = $("#" + id);
$('.tabTrigger').removeClass('selectedTab');
$tab.addClass('selectedTab');
$('.tabContent').hide();
$('#' + id.replace('tab','content')).show();
}
The rest is then very easy:
// Show the selected tab, or the first one if none is selected
var selectedId = $('.tabTrigger.selectedTab').attr('id');
showTab(selectedId || $('.tabTrigger:first').attr('id'));
// Set up the click handlers
$('.tabTrigger').click(function(){
showTab(this.id);
});
As a general note, in all such cases you need to factor the code you want to run into a self-contained function. Once you do that, the rest comes naturally.
Try $('.tabTrigger.selectedTab')
as the selector instead, and then use .show()
to show them:
$('.tabTrigger.selectedTab').show();
http://jsfiddle.net/mattlunn/4CtLV/1/
Try my update: http://jsfiddle.net/4CtLV/5/
$(document).ready(function() {
$('.tabContent:gt(0)').hide();
$('.tabTrigger:first').addClass('selectedTab');
var selectedTab = $('.tabTrigger.selectedTab:first');
if (selectedTab.length == 1) {
$('#' + selectedTab.attr('id').replace('tab', 'content')).show();
}
$('.tabTrigger').click(function() {
$('.tabTrigger').removeClass('selectedTab');
$(this).addClass('selectedTab');
$('.tabContent').hide();
var id = $(this).attr('id');
id = id.replace('tab', 'content');
$('#' + id).show();
});
});
精彩评论