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

我有四个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-->

忘了CSS，我道歉

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

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

提前谢谢你

这应该可以做到：

（对元素使用类而不是ID）

$（“#next1”）。单击（函数（）{
$（“#两”）.show（）；
$（“#一”）.hide（）；
});
$（“#next2”）。单击（函数（）{
$（“#三”）.show（）；
$（“#两”）.hide（）；
});
$（“#next3”）。单击（函数（）{
$（“#四”）.show（）；
$（“#三”）.hide（）；
});
#二#三#四{
显示：无；
}

占位符1
下一个
占位符2
下一个
占位符3
下一个
占位符4
这就是您正在处理的简单查询

$(".btn-default").click(function(){
$(this).closest('div').hide();  //Gets the closest div associated with your button click
$(this).closest('div').next('div').show();   //hide the next div
});

试试这个


$（“button.btn默认值”）。单击（函数（）{
$（this.closest（'div'）.hide（）；
$（this）.closest（'div'）.next（'div'）.show（）；
});
#二#三#四{
显示：无；
}

占位符1
下一个
占位符2
下一个
占位符3
下一个
占位符4
不必为每个div指定自己的类或ID

您可以为它们提供相同的类，并使用jQuery eq:filter选择正确的div

示例代码：

$(".custom button").click(function(){
    var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.

    $('.custom').hide();
    $('.custom:eq(' + nextDiv + ')').show();
});

工作示例：

另一个示例，使用CSS隐藏除第一个以外的所有内容：

希望这能有所帮助。
事实上，你的代码没有问题。只是让四个div看起来有所不同。
css在操作中丢失了。你是在使用jQuery隐藏加载中的其他三个div，还是默认情况下div的css样式
显示：无
？你也在显示，这就是为什么你需要隐藏最后一个
.show（）div；很抱歉，对于css，是二、三、四{display:none；}，并在加载css时隐藏它们。我注意到了这一点，但在发布后的一分钟内编辑了它。您的速度很快，在编辑前发布，感谢您的快速回复！非常感谢。但是，如果在此之后我还有其他div，我不想受显示/隐藏的影响，这会影响吗？只要你不给它们相同的类，它们就不会受函数的影响。Hrmm，也许我的浏览器出问题了。这行不通。即使复制也会将其他人的代码粘贴到一个全新的文档中，但它不起作用。奇怪的谢谢你的回复。解决了这个问题。我在document.ready函数中没有jquery，因此它甚至在创建按钮之前就尝试运行了。现在可以工作了，谢谢！
$(".custom button").click(function(){
    var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.

    $('.custom').hide();
    $('.custom:eq(' + nextDiv + ')').show();
});