之前有发布过基于Jquery的一个淡入淡出TAB效果[附飞入飞出修改方法,修正下载错误],但是该jquery方法仅能使用一次,如果同一页面有多处要使用该方法,便无效,这次修正了这个BUG,同页面可多处引用!细则见下文

base-on-jquery-tabs-slide

演示地址:http://www.Joomla178.com/download/Front-end/base-on-jquery-tabs-slide/index.html

下载地址:http://www.Joomla178.com/download/file/24-base-on-jquery-tabs-slide.html

之前有说过怎么改变效果,不再阐述!改正后的方法,就是给引用的DIV调取不同的class名而已,这个class名形式同 xxx_1、xxx_2、xxx_3....,便于前端代码设计,见如下代码

$(document).ready(function() {

$("div[class*='Joomla178_con_']").each(function(i){
if($(this).is(':visible')){//当当前Joomla178_con_i可见时                           
$(this).next().hide();
$("ul.Joomla178_nav_"+i+" li:first").addClass("active").show();//这个i便是数字编号
$(".Joomla178_con_"+i+":first").show(); }
else{        
$(this).next().toggle();
$("ul.Joomla178_nav_"+i+" li:first").addClass("active").show();
}


$("ul.Joomla178_nav_"+i+" li").click(function() {
$("ul.Joomla178_nav_"+i+" li").removeClass("active");
$(this).addClass("active");
$(".Joomla178_con_"+i).hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
});

前端调用class的时候,就直接写成

<div class="Joomla178_con_1"></div>
<div class="Joomla178_con_2"></div>
<div class="Joomla178_con_3"></div>
.....

解决此问题要感谢CDSN.NET上面的Crazywa 网友,求助帖见:http://topic.csdn.net/u/20110107/14/4e2228b8-e0ad-4806-81c3-5c67e8ff2e6e.html?798323488

除特殊标明文章转自第三方网站,文章均由JOOMLASK.COM原创提供
欢迎友情转载,请务必保留本文出处并引用本文链接: Jquery淡入淡出TAB效果修订版【同页面可多个引用】

智能搜索

支付宝官方话费充值

淘宝充值