Question

我有两个并排的按钮，当点击时标有“有效”类＆amp;还会在下面的div上触发CSS幻灯片效果。

首次点击该页面时，按钮A已被归类为“有效”＆amp;幻灯片1已打开。当您单击按钮B时，它已成功归类为“活动”＆amp;滑块成功滑动到幻灯片2（从右到左）。

我无法理解的是，如果再次单击按钮A，现在如何反转滑块。我在实时网站上查看了完全相同的例子，但它们似乎比它必须要复杂得多。

HTML：

<div id="get-in-touch" class="row show-for-medium-up">
    <ul class="tab-navigation small-12 columns">
        <li id="say-hello-form">
            <div class="small-12 medium-6 columns">
                <h4>Want to say hello?</h4>
                <button id="send-message" class="active" rel="tab1">Send us a Message</button>
            </div>
        </li>

        <h4 class="or">OR</h4>

        <li id="start-project-form">
            <div class="small-12 medium-6 columns">
                <h4>Want to work with us?</h4>
                <button id="kick-start" rel="tab2">Kick Start your Project</button>
            </div>
        </li>
    </div>
</div>

<section id="say-hello-wrapper-outer" >
    <section id="say-hello-wrapper-inner" class="row">
        <section id="say-hello" class="active hide-for-small tab-container">
            <div id="tab1" class="row tab_content">
                <div class="medium-6 columns">
                    <div id="map">
                        <p>We work remotely with clients all over Australia!</p>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/map.jpg">
                    </div>
                </div>
                <div id="form" class="medium-6 columns">
                    <?php gravity_form(2, false, false, false, '', true); ?>
                </div>
            </div>

            <div id="tab2" class="row tab_content">
                <div id="form" class="medium-12 columns">
                    <?php gravity_form(3, false, false, false, '', true); ?>
                </div>
            </div>
        </section>
    </section>
</section>

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;
}

JS：

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

Answer 1

问题是你试图在每个按钮上运行相同的东西，你可以使用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”类应用于滑块。

如果我可以给你一些与你的问题完全不相关的建议，就是以一种不那么令人困惑的方式开始命名，例如将“活动”类应用于滑块和按钮并在同一个游戏中使用范围函数，当你尝试调试它时很快就会感到痛苦。

此外，尝试编写代码，因为它将为您自己编写一个独立的包，以便尽可能地重用它而无需重新读取它，这意味着以下内容：

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

您可能会同意我的看法<button class="js-slider" data-position="left">每次使用和重新编码每个按钮元素的效率更高。

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

滑动div再次点击然后再返回 - Jquery

1 个答案: