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

试试这个：

$('.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()回调中显示新标签。

Answer 2

由于你已经在使用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
        }
    });
});

将fadeOut添加到选项卡

2 个答案: