滑动 jquery 标签内容
Sliding jquery tabbed content
有人可以帮我更改选项卡式内容代码,以便在选项卡更改时淡入淡出和滑入和滑出选项卡式内容。
我正在使用 this script。
以及头部位中的代码:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current')
})
非常感谢!
您可以尝试如下:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').fadeOut(100).removeClass('current');
$(this).fadeIn(1000).addClass('current');
$("#"+tab_id).fadeIn(1000).addClass('current');
})
更新
SlideUp 和 SlideDown 尝试如下:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').slideUp("slow",function(){
$(this).removeClass('current');
});
$(this).addClass('current');
$("#"+tab_id).slideDown("slow",function(){
$(this).addClass('current');
});
})
有人可以帮我更改选项卡式内容代码,以便在选项卡更改时淡入淡出和滑入和滑出选项卡式内容。
我正在使用 this script。
以及头部位中的代码:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current')
})
非常感谢!
您可以尝试如下:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').fadeOut(100).removeClass('current');
$(this).fadeIn(1000).addClass('current');
$("#"+tab_id).fadeIn(1000).addClass('current');
})
更新
SlideUp 和 SlideDown 尝试如下:
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').slideUp("slow",function(){
$(this).removeClass('current');
});
$(this).addClass('current');
$("#"+tab_id).slideDown("slow",function(){
$(this).addClass('current');
});
})