javascript - 通过单击按钮显示和隐藏 div

Question

我有四个 div，第一个显示在网站加载时。我目前正在使用 CSS 隐藏其他三个负载(显示:无)

在显示的第一个 div 中，我有一个单击按钮，我想隐藏当前的 div，然后显示下一个 div。

<div id="one">
            <h3>Placeholder</h3>
            <form>
                    <button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
            </form>    

</div><!--Closes One-->

<div id="two">
            <h3>Placeholder</h3>
            <form>
                    <button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Two-->

<div id="three">
            <h3>Placeholder</h3>
            <form>
                    <button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Three-->

<div id="four">
            <h3>Placeholder</h3>
</div><!--Closes Four-->

所以我希望创建一些 Jquery 来实现这一点。

这是我的简陋代码，根本无法正常工作...

$("#next1").click(function(){
    $("#two").show();
    $("#one").hide();
});

$("#next2").click(function(){
    $("#three").show();
    $("#two").hide();
});

$("#next3").click(function(){
    $("#four").show();
    $("#three").hide();
});

忘记了 CSS，我很抱歉!

#two, #three, #four {
  display: none;
  }

我假设我不需要每次都明确地说隐藏所有三个 div，因为 CSS 已经隐藏了两个到四个，然后通过 Jquery 一次改变一个。

提前谢谢你!

Answer 1

应该这样做:

(您使用类而不是元素的 id)

$("#next1").click(function(){
    $("#two").show();
    $("#one").hide();
});

$("#next2").click(function(){
    $("#three").show();
    $("#two").hide();
});

$("#next3").click(function(){
    $("#four").show();
    $("#three").hide();
});

#two, #three, #four {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
            <h3>Placeholder 1</h3>
            <form>
                    <button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
            </form>    

</div><!--Closes One-->

<div id="two">
            <h3>Placeholder 2</h3>
            <form>
                    <button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Two-->

<div id="three">
            <h3>Placeholder 3</h3>
            <form>
                    <button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Three-->

<div id="four">
            <h3>Placeholder 4</h3>
</div><!--Closes Four-->