使用jQuery替换DIV

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

我最初只使用了两个bios（第一人称和第三人称），我让它工作得很好：

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

这是一把小提琴：

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

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

这是一把小提琴：

如果有任何帮助，我们将不胜感激。

请向您的小提琴手查询。我绝对会定位bios，这样它们都在同一个点垂直启动，这样就消除了在转换它们时的“跳转”

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

---

对于这种情况，最好为当前的活动bio设置一个“活动”类，这样可以更容易管理

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

如果你能想出一种让代码更加模块化的方法，那就更好了，这样你就不必在每次需要添加/删除bio时都对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>

这也会为您执行一些事件委派，因此您可以将1个事件附加到dom，而不是3个

---

同时考虑到Josh的建议，您不需要将淡入淡出设置为回调淡出，您可以同时启动淡入淡出设置。是否同时显示两个div？因为否则我不明白你为什么会淡出其中两个？其思路如下： 1.向当前显示的div中添加一个类（您已经这样做了，但位置不对）（假设类名为“selected”） 2.单击选项卡时，选择具有“selected”类的元素并将其淡出。在提供给淡出的回调中，还将从显示的元素中删除所选的类，并将其放置到刚才单击的选项卡中

当然，jqueryui总是存在的。

---

祝你好运

这里有一些与你的“设计”相关的重构。您可以通过添加's

position: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);
  });
}

我们开始：

这里的主要问题是，您应该绝对定位

.short、.medium和.long

类，这样您将避免缺少的问题。另外，你应该把它放在另一个类中。如果将来添加一个

.extralong

类，那么使用jQuery很容易选择它

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

Jquery： CSS: 小提琴：

$("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);
  });
}

$('.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');
});

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