私たちの広告ページでは、タブに次の jscript を使用しています。
$(window).load(function(){
$('.tab:not(.aboutus)').hide();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').hide();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.map').show();
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.vouchers').show();
}
}
});
そして、この js を使用するこちらの例のようなフェード効果を組み込みたいと思います:
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$nav = base.$el.find(".nav");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hide").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$nav.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
var newHeight = base.$el.find("#"+listID).height();
$allListWrap.animate({
height: newHeight
});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".nav li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 300
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
更新：これらは、コードを修正して動作させる必要があると考えているコードの一部ですが、統合するのに役立つ場合があります。
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
どんなアイデアでも大歓迎です。