javascript - 向选项卡添加淡出效果

Question

我想向选项卡添加淡出 on my page here ，是否有人可以在 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 plugin从这里开始并想使用它，如果有人熟悉它那就是理想的。

Here's how I would like it to work.

更新:这就是我现在所拥有的，但是每个选项卡的淡入淡出效果几乎都不同 - 我喜欢回到“关于我们”选项卡的过渡，它不像其他选项卡的过渡那样“沉重”。优惠选项卡也留下了“功能”选项卡内容的残余内容。

  $(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);
        }
    }   

});

Answer 1

由于您已经在使用 jQuery，所以它非常简单...您无需进行代码操作。 JQuery UI 有选项卡小部件。

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

如果你想在 Ajax 上加载内容 http://jqueryui.com/tabs/#ajax

这里是完整的 API..

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

DEMO

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>

和java脚本(记住你需要添加jquery和jquery ui js和css)

$(window).load(function () {

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