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 に答える