滑动div onclick，然后再次返回-Jquery

我有两个并排的按钮，当点击时，它们被标记为“活动”类，并且在下方的div上触发CSS幻灯片效果

在第一次点击页面时，按钮A已经被归类为“活动”，幻灯片1打开。当您单击按钮B时，它被成功分类为“活动”&滑块成功滑动到幻灯片2（从右到左）

我不能弄清楚的是，如果再次单击按钮A，现在如何反转滑块。我看过一些直播网站上的例子，它们的特点完全相同，但它们似乎比实际情况复杂得多

HTML:

JS:

---

问题是，您试图在每个按钮上运行相同的操作，您可能需要使用if语句来区分它们：

jQuery("ul.tab-navigation li button").click(function() {
    jQuery("ul.tab-navigation li button").removeClass("active");
    jQuery(this).addClass("active");
    if (this.id == "kick-start"))
      jQuery('#say-hello').removeClass("active");
    else
      jQuery('#say-hello').addClass("active");
});

只有当您按下kickstart按钮时，才会将类“active”应用于滑块

如果我可以给你一个与你的问题不完全相关的建议，那就是开始以一种不那么混乱的方式命名事物，例如，将“active”类应用于滑块和按钮，并在同一个作用域函数中进行操作，当你试着调试它时，很快就会感到痛苦

此外，试着编写代码，就像编写一个独立的包一样，以便在不重新适应的情况下尽可能地重用代码，这意味着：

• 除非绝对必要，否则停止在CSS和JS中使用ID
• 将所有相关项目放在同一个容器下，一个部分中的按钮和另一个部分上的驱动滑块是无意义的
• 使用按钮上的数据属性传递信息，例如data position=“”可以告诉按钮上的滑块编号或滑块方向

您可能会同意我的看法，

比每次使用和重新编码每个按钮元素更有效

---

这对某些人来说可能听起来很明显，但这使您能够开始编写更干净、更轻量级的代码，这对于您（以及其他帮助您的人）来说非常容易调试

如果我添加了一个实时链接，JSFIDLE将非常好。请提供一个链接，或者至少用您发布的javascript发布相关的HTML和CSS。。搜索你的网站真的很难找到问题：）我添加了HTML和CSS。谢谢，这完全有道理！就我所知，我从另一个网站上复制了这个结构，但我同意它可以更加简洁。无论如何，谢谢你的提示。

#say-hello-wrapper-outer {
    background: #f5f6fa;
    width: 100%;
}

#say-hello-wrapper-inner {
    overflow: hidden;
    background: #f5f6fa;
}

#say-hello {
    width: 2280px;
    height: 2000px;
    overflow: hidden;
    margin-left: -1140px;
    // margin-left: -1100px;

    -webkit-transition: margin-left 0.6s;
    -moz-transition: margin-left 0.6s;
    transition: margin-left 0.6s;

    #tab1, #tab2 {
        width: 1170px;
        float: left;
    }
}

#say-hello > #form {
    border-bottom: 1px solid #ebebeb;
}

#say-hello.active {
    margin-left: 0px;
}

jQuery("ul.tab-navigation li button").click(function() {
    jQuery("ul.tab-navigation li button").removeClass("active");
    jQuery(this).addClass("active");

    jQuery('#say-hello').removeClass("active", function() {
      jQuery('#say-hello').addClass("active");
    });
});

jQuery("ul.tab-navigation li button").click(function() {
    jQuery("ul.tab-navigation li button").removeClass("active");
    jQuery(this).addClass("active");
    if (this.id == "kick-start"))
      jQuery('#say-hello').removeClass("active");
    else
      jQuery('#say-hello').addClass("active");
});