给选项卡添加淡出效果

Question

给选项卡添加淡出效果

3

我可以帮忙翻译。这段内容是关于在页面中添加淡出效果到选项卡上的 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);
        }
    }   

});

- user2367386

通常情况下，.fadeOut() 会替换 .hide()。 - Ian

你能展示一下 jsfiddle 吗？ - rahul maindargi

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- boz · Answer 1

试试这个：

$('.tabs li').click(function(){
    var thisAd = $(this).parent().parent();
    $('.tabs li').removeClass('active'); 
    $(thisAd).children('.tab').fadeOut(250, function(){
        $(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();                                                 
        $(this).addClass('active');
    });
});

您可以将250的持续时间更改为任何您想要的值。我所做的就是在fadeOut()回调中淡出当前打开的选项卡，然后显示新选项卡。

- rahul maindargi · Answer 2

由于你已经在使用jQuery，所以非常简单... 你不需要深入代码的操作。jQuery UI有选项卡小部件。

http://jqueryui.com/tabs/#default

如果您想在Ajax上加载内容 http://jqueryui.com/tabs/#ajax 这里是完整的API..

http://api.jqueryui.com/tabs/#option-hide

演示

HTML更改

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>

  <div id="tabs-1">
    <p>TAB 1</p>
  </div>
  <div id="tabs-2">
    <p>TAB 2</p>
  </div>
  <div id="tabs-3">
    <p>TAB 3</p>
  </div>
</div>

修改了 JavaScript

$(window).load(function () {

    $("#tabs").tabs({
        hide: {
            effect: "fadeOut",
            duration: 100
        },
        show: {
            effect: "fadeIn",
            duration: 100
        }
    });
});

在您的代码中，您可以进行以下更改（假设所有div的内容在页面加载时都可用）：

<div id="tabs">
<ul class="tabs clearfix">
        <li class="aboutus tab active" style="border-left:1px solid #ccc;"><div class="up"></div><a href="#about">About</a></li>
        <li class="map tab"><div class="up"></div><a href="#map">Map</a></li>
        <li class="features tab"><div class="up"></div><a href="#features">Feature</a></li>
        <li class="vouchers tab"><div class="up"></div><a href="#offers">Offers</li>
    </ul>
      <div id="about">
        <p>about TAB 1</p>
      </div>
       <div id="map">
        <p>MAP TAB 1</p>
      </div>
      <div id="features">
        <p>features TAB 1</p>
      </div>
     <div id="offers">
        <p>offers TAB 1</p>
      </div>
</div>

还要添加 jQuery 和 jQuery UI 的 JavaScript 和 CSS 文件

$(window).load(function () {

    $("#tabs").tabs({
        hide: {
            effect: "fadeOut",
            duration: 100
        },
        show: {
            effect: "fadeIn",
            duration: 100
        }
    });
});