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

});
4

2 回答 2

0

尝试这个：

$('.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()回调中显示新标签之前淡出当前打开的标签。

于 2013-05-15T16:13:23.217 回答
0

因为您已经在使用 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>

和java脚本（记住你需要添加jquery和jquery ui js和css）

$(window).load(function () {

    $("#tabs").tabs({
        hide: {
            effect: "fadeOut",
            duration: 100
        },
        show: {
            effect: "fadeIn",
            duration: 100
        }
    });
});
于 2013-05-15T16:22:23.903 回答