Javascript淡入（制表符）

Question

我有一個使用某些Javascript切換標簽的標簽系統。 我希望它們在切換標簽時淡入淡出。 目前，JS只是刪除並添加了用戶選擇的單擊選項卡。 我已經在JS中完成了淡入淡出的工作，但它並未刪除選項卡。

 $(document).ready(function() { $('ul.tabs li').click(function() { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <div class="col-md-6"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Tab One</li> <li class="tab-link" data-tab="tab-2">Tab Two</li> <li class="tab-link" data-tab="tab-3">Tab Three</li> <li class="tab-link" data-tab="tab-4">Tab Four</li> </ul> </div> <div class="col-md-6"> <div id="tab-1" class="tab-content current"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div id="tab-2" class="tab-content"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab-3" class="tab-content"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div id="tab-4" class="tab-content"> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <!-- container --> 

Answer 1

您已到達那里。

一個非常簡單的解決方案，因為您已經在使用jQuery，將使用fadeIn和fadeOut。

這樣的事情應該起作用：

$(document).ready(function(){
    var last_id;
    $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        // Fade out elements with tab-content class
        $('.tab-content').fadeOut( "slow");

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

        // fade out the last content
        if(last_id) $("#"+last_id).fadeOut();
        // Fade in the element you want to show
        $("#"+tab_id).fadeIn( "slow");
        last_id = tab_id;
    })
})

有關淡入和淡出的更多信息，請訪問http://api.jquery.com/fadeout/ http://api.jquery.com/fadein/

Answer 2

$(document).ready(function(){
    var selectedtab;
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        if(selectedtab) $("#"+selectedtab).hide();
        $("#"+tab_id).fadeIn("slow");
        selectedtab = tab_id;
        $(this).addClass('current');
    })
})

使用變量存儲所選選項卡的tab_id。

Answer 3

您可以使用fadeIn() jQuery函數來淡入選項卡。 您必須將腳本代碼中的某些行替換為

第一

$('.tab-content').removeClass('current');

至

$('.tab-content').removeClass('current').hide();

第二名：

$("#" + tab_id).addClass('current');

至

$("#" + tab_id).addClass('current').fadeIn();

有關jQuery褪色的更多幫助

 $(document).ready(function() { $('ul.tabs li').click(function() { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current').hide(); $(this).addClass('current'); $("#" + tab_id).addClass('current').fadeIn(); }); }); 

 body { font: 13px Verdana; } .tab-content { display: none; } .tab-content.current { display: block; } .tabs { padding: 0; list-style: none; } .tabs li { display: inline-block; margin: 0 10px; padding: 6px; cursor: pointer; } .tabs li.current { background: red; color: #fff; cursor: initial; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="col-sm-6"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Tab One</li> <li class="tab-link" data-tab="tab-2">Tab Two</li> <li class="tab-link" data-tab="tab-3">Tab Three</li> <li class="tab-link" data-tab="tab-4">Tab Four</li> </ul> </div> <div class="col-md-6"> <div id="tab-1" class="tab-content current"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div id="tab-2" class="tab-content"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab-3" class="tab-content"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div id="tab-4" class="tab-content"> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div>