Question

我正在使用jQuery为客户构建一个可排序的传记部分。

我最初只使用了两个bios（第一人称，第三人称），我让它完美运行：

$("a#first").click(function(){
    $("div.third").fadeOut("",function(){
        $("div.first").fadeIn("");
    });
});

这是一个小提琴：

http://jsfiddle.net/Vp7BL/1/

现在我们改变了方向，并使用三种不同的生物长度（短，中，长）进行分类。出于某种原因，我不能让这个工作。我认为这只是将额外的div添加到选择器中的问题（下面的第2行），但它是超级滞后的。

$("a#short").click(function(){
        $("div.medium, div.long").fadeOut("",function(){
        $("div.short").fadeIn("");
    }); 
});

这是一个小提琴：

http://jsfiddle.net/Vp7BL/

非常感谢任何帮助。

Answer 1

查看这个update给你的小提琴。我绝对会定位bios，这样他们都会在垂直的同一点开始，从而消除了跳跃。将它们转入和转出时。

.short, .medium, .long {
    position: absolute;
    top: 40px;
}

Answer 2

对于类似这样的事情，最好有一个＆＃34;活跃的＆＃34;对于当前活跃的生物类，它会使这更容易管理。

$('a#short').click(function() {
  $('div.active').removeClass("active").fadeOut("", function() {
    $('div.short').addClass("active").fadeIn("");
  });
});

最好让你想出一种方法来使代码更加模块化，这样你就不必在每次需要添加/删除生物时都对JS进行更改。

假设我的链接设置为

<ul id="bionav">
  <a class="bio-link" data-bio="short">short</a>
  <a class="bio-link" data-bio="med">med</a>
  <a class="bio-link" data-bio="long">long</a>
</ul>
<ul id="biodisplay">
  <div class="bio-link short">short</div>
  <div class="bio-link med">med</div>
  <div class="bio-link long">long</div>
</ul>

你可以像

那样控制你的套装

$('#bionav').on('click', '.bio-link', function() {
  var $bioDisplay = $('#biodisplay'),
  $targetBio = $(this).attr('data-bio'); //if ie doesn't matter you can do .data('bio');
  $active = $bioDisplay.find('.active');

  if ($active != undefined) {
    $active.removeClass('active').fadeOut("", showBio($targetBio));
  } else {
    showBio($targetBio);
  }
});

function showBio(bio) {
  bio.addClass('active').fadeIn("");
}

这也为你做了一些事件委托，所以你将1个事件附加到dom而不是3个

另外考虑到Josh的建议，你不需要进行淡入淡出回调fadeOut，你可以同时启动它们以进行交叉渐变。

Answer 3

您是否一次显示两个div？因为否则我不明白为什么你会淡出其中的两个呢？这个想法如下： 1.将一个类（你已经在那个但是在错误的地方）添加到当前显示的div（假设类名是＆＃34;选择＆＃34;） 2.单击选项卡时，选择＆＃34;选择＆＃34;上课并淡出。在您提供给fadeout的回调中，还会删除从显示的元素中选择的类，并将其放到您刚刚单击的选项卡中。

当然，总有jquery-ui。祝你好运

Answer 4

这里有一些与您的设计相关的重构＆＃34;。您可以通过添加Josh Rutherford postion: absolute CSS样式来保持标记完全相同。我想发布此内容，以便您了解如何更轻松地管理此代码（以及修复您的实际问题）。

CSS：

.short, .medium, .long {
    position: absolute;
    top: 30px; /* whatever you prefer */
}

JS：

$("a#short, a#medium, a#long").on("click", function() {
    var elid = $(this).attr('id');
    // Run getTab based on id attribute
    getTab(elid);
});

function getTab(tab, speed=500) {
  // Select the current tab
  var the_tab = $("#" + tab);

  // Select the current tab's matching content div
  var content = $("."+tab);

  // Push sibling tabs' classes into an array
  // Tab id value matches with respective div class value
  sibs = [];

  the_tab.siblings().each(function () {
      sibs.push('.' + $(this).attr('id'));
      // Deselect sibling tabs
      $(this).removeClass('selected');
  });

  // Fade out siblings
  $(sibs.join(",")).fadeOut(speed, function() {
      // Fade in current tab and add selected class
      the_tab.addClass('selected');
      content.fadeIn(speed);
  });
}

Answer 5

我们走了：

这里的主要问题是你应该绝对定位.short, .medium and .long类，这样你就可以避免缺乏问题。另外，你应该把它放在另一个类中。如果你以后添加.extralong类，那么用jQuery很容易选择它。

几次更改后，您的代码应如下所示：

Jquery的：

$('.toggles a').click(function(e) {
    //Never forget this
    e.preventDefault();
    //if click on the selected do nothing
    if($(this).hasClass('selected'))
        return false;
    //let fadeOut all the texts 
    $('.short, .medium, .long').fadeOut('10');
    //let fadeIn the clicked one
    $('.'+$(this).attr('id')).fadeIn();
    //remove all the selected class
    $('.toggles a').removeClass('selected');
    //add the selected class to the clicked one
    $(this).addClass('selected');
});

CSS：

.short, .medium, .long{
    position: absolute;
}

小提琴：

http://jsfiddle.net/Vp7BL/3/

使用jQuery替换DIV

5 个答案:

Jquery的：

CSS：

小提琴：