Hey guys, I want to make a function loop over all elements that have the class of ".block-header-tabs" and do the following:
$(function(){
function cssTabs(){
var firstTab = $(".block-header-tabs").find("a:first");
var firstBlock = $(".block-header-tabs").find("a:first").attr('href');
$(firstBlock).parent().css({position: "relative"});
$(firstBlock).css({position: "absolute", zIndex: "2"})
$(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$(firstTab).addClass("tab-current");
$(开发者_JS百科firstTab).siblings().addClass("tab-noncurrent");
}
cssTabs();
$(".block-header-tabs a").click(function(){
$(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
$(this).removeClass("tab-noncurrent").addClass("tab-current")
var clickedTab = $(this).attr('href');
$(clickedTab).siblings().css({zIndex: "1"}).stop(0,0).animate({opacity:"0"}, function(){
$(clickedTab).siblings().css({display:"none"});
});
$(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});
return false;
});
});
here is a link to live example so you can check it out yourselves :) http://dl.dropbox.com/u/2878602/moviezet/index.html
thanks
Try This
$(function(){
function cssTabs($this){
var firstTab = $this(".block-header-tabs").find("a:first");
var firstBlock = $this(".block-header-tabs").find("a:first").attr('href');
$(firstBlock).parent().css({position: "relative"});
$(firstBlock).css({position: "absolute", zIndex: "2"})
$(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$(firstTab).addClass("tab-current");
$(firstTab).siblings().addClass("tab-noncurrent");
}
$('.block-header-tabs').each(function(index) {
cssTabs($(this));
$(this).find("a").click(function(){
$(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
$(this).removeClass("tab-noncurrent").addClass("tab-current")
var clickedTab = $(this).attr('href');
$(clickedTab).siblings().css({zIndex: "1"}).stop(0,0).animate({opacity:"0"}, function(){
$(clickedTab).siblings().css({display:"none"});
});
$(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});
return false;
});
});
});
function cssTabs(element){
var firstTab = element.find("a:first");
var firstBlock = element.find("a:first").attr('href');
$(firstBlock).parent().css({position: "relative"});
$(firstBlock).css({position: "absolute", zIndex: "2"})
$(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$(firstTab).addClass("tab-current");
$(firstTab).siblings().addClass("tab-noncurrent");
}
$(function(){
$.each($('.block-header-tabs'), function(i, el){
cssTabs($(this));
$(this).find('a').click(function(){
$(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
$(this).removeClass("tab-noncurrent").addClass("tab-current");
var clickedTab = $(this).attr('href');
$(clickedTab).siblings().css({
zIndex: "1"
}).stop(0,0).animate({
opacity:"0"
}, function(){
$(clickedTab).siblings().css({display:"none"});
});
$(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});
return false;
})
});
});
Hey I resolved this myself, turns out that I cannot use a:first to target the main block if I want to use .each() on it. :) here is the fixed code if anyone is interested:
$(".block-header-tabs").each(function(){
$($(this).find("a:first").attr('href')).css({position: "absolute", zIndex: "2"})
$($(this).find("a:first").attr('href')).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$($(this).find("a:first").attr('href')).parent().css({position: "relative"});
});
Thanks :D
精彩评论