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

Fading 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>

淡入淡出（标签）

3 个答案: