如果有人可以在 javascript 方面提供帮助,我想在我的页面上的选项卡中添加淡出?
这是html:
<ul class="tabs clearfix">
<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="maptab"><div class="up"></div>Map</li>
<li class="featurestab"><div class="up"></div>Features</li>
<li class="voucherstab"><div class="up"></div>Offers</li>
</ul>
这是javascript:
$(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();
}
}
});
我有来自这里的bootstrap.js 插件并且想使用它,如果有人熟悉它会是理想的。
更新:这就是我现在所拥有的,但几乎每个选项卡的淡入淡出效果都不同 - 我喜欢回到关于我们选项卡的过渡,它不像其他选项卡的过渡那样“沉重”。优惠标签也留下了“功能”标签内容的残余。
$(window).load(function(){
$('.tab:not(.aboutus)').fadeOut();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').fadeOut();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
newContent.hide();
currentContent.fadeOut(750, function() {
newContent.fadeIn(500);
currentContent.removeClass('current-content');
newContent.addClass('current-content');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.map').fadeIn(500);
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.vouchers').fadeIn(500);
}
}
});