Javascript 如何使用jquery切换特定div

好吧，我对这方面的知识非常有限，我在任何地方都找不到我的答案。我想做的是创建多个按钮来切换信息。因此，当单击第一个切换时，Div1被切换，当我单击第二个切换时，Div2打开，最好是Div1关闭。我的代码是非常基本的，我对此非常陌生。现在，无论我在切换区域输入什么值，两个div都会关闭。谢谢你，我希望这是有意义的

这是我的密码：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div.house").toggle();

  });
});
</script>

<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>

<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div.house”）.toggle（）；
});
});
切换
样本文本等

切换
样本文本等

您可以选择下一个兄弟姐妹：

$("button").click(function(){
   $(this).next().toggle();
});

---

在上面的代码中，JavaScript关键字指的是单击的元素

$（this）

创建一个jQuery集合，方法选择集合元素的下一个同级

我也同意，首先需要隐藏所有div：

$("button").click(function () {
    $('div').hide();
    $(this).next().toggle();
});

$（文档）.ready（函数（）{
$（文档）.on（“单击“，”.js-toggle____按钮”），函数（e）{
$（“.js-toggle__text”）.hide（）；
$（this.next（“.js-toggle__text”）.show（）；
});
});
切换
示例文本1等

切换
示例文本2等

当您从JS访问元素时，最好使用唯一定义的标识符（不要将它们用于CSS-使用单独的名称）

---

你的HTML代码总有一天会发生巨大的变化，JS无论如何都能工作，因为它取决于标识符，而不是结构或标记名。

你太棒了，哈哈，这工作得很完美。如果你能帮忙，我还有一个问题。有没有办法在单击之前将它们全部隐藏？而不是开始打开。这太简单了，再次谢谢你。@Vincent，非常欢迎你。您可以向目标

div

元素添加一个公共类，然后使用

.hide（）

方法隐藏它们<代码>$（'.targetDivs'）.hide（）。是的，jQuery使DOM操作变得非常简单。你只需要学习它的基本知识并完成它，没有下一步。我还有一个问题对不起。。。有没有办法用图像替换切换按钮？所以我有一个200x50像素的图像，我希望它是切换按钮，而不是灰色的“切换”。谢谢您的帮助。@Vincent是的，只需将

按钮

元素替换为

img

元素即可。向其添加类名，

.button\u img

作为exmaple，并将

按钮

选择器替换为

img.button\u img

。您还可以使用不同的元素，如

span

，并通过使用图像路径设置其

背景图像

属性。遗憾的是，我不能完全确定您的意思。但是使用背景img和我的路径的span选项听起来似乎是可行的。这是否会适用于该项目？