通过JS切换具有相同ID的div

基础概念

在HTML文档中，id属性应该是唯一的，这意味着在一个页面中不应该有多个元素具有相同的id。然而，如果你确实有多个元素使用了相同的id，JavaScript可以通过不同的方式来选择和切换这些元素。

为什么不应该使用相同的ID

使用相同的id会导致以下问题：

DOM选择器失效：document.getElementById只会返回第一个匹配的元素。
CSS样式冲突：相同的id会导致CSS选择器无法准确应用样式。
JavaScript操作错误：脚本可能会错误地操作到其他具有相同id的元素。

如何解决这个问题

1. 使用类（Class）代替ID

使用类可以避免ID重复的问题，并且可以通过类选择器来操作多个元素。

<div class="my-div">Div 1</div>
<div class="my-div">Div 2</div>
<div class="my-div">Div 3</div>

// 切换所有具有相同类的div的显示状态
document.querySelectorAll('.my-div').forEach(div => {
    div.style.display = div.style.display === 'none' ? 'block' : 'none';
});

2. 使用唯一ID

确保每个元素都有一个唯一的ID。

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

// 切换特定ID的div的显示状态
function toggleDiv(id) {
    const div = document.getElementById(id);
    if (div) {
        div.style.display = div.style.display === 'none' ? 'block' : 'none';
    }
}

toggleDiv('div1');

应用场景

假设你有一个页面上有多个选项卡，每个选项卡对应一个内容区域，这些内容区域的id相同。你可以通过切换类或唯一ID来实现选项卡的切换效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Divs</title>
    <style>
        .my-div {
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="toggleDivs()">Toggle Divs</button>
    <div class="my-div">Div 1</div>
    <div class="my-div">Div 2</div>
    <div class="my-div">Div 3</div>

    <script>
        function toggleDivs() {
            document.querySelectorAll('.my-div').forEach(div => {
                div.style.display = div.style.display === 'none' ? 'block' : 'none';
            });
        }
    </script>
</body>
</html>

参考链接

通过以上方法，你可以有效地解决使用相同ID的问题，并且能够灵活地切换和操作多个元素。

通过JS切换具有相同ID的div

、、

以下是我的代码。我的要求是默认情况下通过JS隐藏所有div。当点击链接时，它应该打开具有相同id的相关div。class="links"> <li><a href="#del"

浏览 47提问于2020-04-08得票数 2

回答已采纳

2回答

Jquery切换具有相同id的多个div

、、

我使用jQuery来切换div。btnstoreofferlisting-3").click(function(){ });</script> 我有更多的带有“storeofferlisting 3”id的div。我点击“#btnstoreofferlisting 3”按钮，但只有一个div隐藏并显示。我怎样才

浏览 0提问于2016-10-12得票数 2

2回答

滑动切换具有相同id的多个div

、

字段是从数据库动态生成的。如果任何用户点击艺术家的名字，几乎没有其他与艺术家相关的信息显示出来。起初，其余的信息被隐藏起来。 <div id="rest"> <td>Blah</td> <td>Blah</td><td>Blah<&#x

浏览 3提问于2014-05-10得票数 1

回答已采纳

6回答

Jquery切换具有相同id的每个div

、、、

我想切换一组每个都有相同id的div。我目前的jquery代码只切换一个div。(我尝试过混合使用.next和.parent.next，但还没有找到任何东西)$('#body'+id).toggle('400');所以:将会有多个带有'#body2010‘id的div。我想要切换所有这些。

浏览 1提问于2010-01-07得票数 1

回答已采纳

4回答

在多个div之间切换可见性

、

我正在努力寻找最简单的JS解决方案，最好是jQuery，以完成以下任务:我有许多div，都具有相同的类，我想简单地切换每个div的可见性，一次一个。<a href="#" id="toggle-trigger">Toggle Div Visibility</a> <div class="

浏览 0提问于2012-06-21得票数 0

回答已采纳

1回答

隐藏/显示div，最重要的是返回

、、、

我想以一种特定的方式隐藏/显示div。我把一个可点击的文本放在开头，一个放在结尾。按钮很好用，但我想要这个东西：<a href="javascript:visibilite('divid21');"> <div <em

浏览 1提问于2017-04-25得票数 0

1回答

切换具有相同类的div

、

我正在寻找一个解决方案来切换下一个.info div，如果我点击"clickme“。我用next()等尝试了很多东西，但都不起作用。 });}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">1.1</span>Great</

浏览 0提问于2016-12-14得票数 1

1回答

将具有相同ID名称的Div切换到循环中

、、

我正在努力切换到我的视图，我只能显示第一个div内容。当我想通过按下命名的period_select_range_btn链接来显示名为selectPeriodRangePanel的第二个div内容时，我总是显示第一个div内容。[i] %>

浏览 19提问于2018-03-03得票数 0

1回答

切换功能在字体上不起作用。在第一次切换后，浏览器将删除id上的事件处理程序

、、

汉堡包图标会切换到时间图标，但不会发生相反的情况。在第一次单击之后，事件处理程序将从具有相同id的svg标记中删除。js文件中不存在其他代码。 })<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.<e

浏览 1提问于2021-10-02得票数 1

2回答

重复性.toggleClass问题

、、、

我有一些重复的div，我试图在上面.toggleClass多个元素，但在不更改其他元素的情况下无法指向正确的元素。基本上，我有一堆具有相同ids和类的div，我只想通过单击带有类"a_expander“的链接来切换每个div以展开。我希望在"a_collapse a_expand“之间切换#result类，并在"rescellLc r

浏览 1提问于2013-09-01得票数 0

2回答

同一个类的多个DIVs，每个DIVs在2 DIVs之间独立切换。

、

我有多个具有相同类(.item)的div，并试图找出如何在两个div (#open和#close)之间独立切换。close {} <script src="https://ajax.googleapis.com/aj

浏览 1提问于2018-09-28得票数 0

回答已采纳

5回答

jQuery toggleClass仅切换一次

、

我有一个div，我试图将它的类从一个切换到另一个。我只能切换它一次，但它不会返回到原来的类。我四处寻找可能的答案，并研究了传播函数，但我不确定这是正确的用法吗？<body> <div id="counter" class="cInact"&

浏览 14提问于2017-02-24得票数 1

5回答

Jquery切换-在多个div上展开/折叠

我最近发现了一些非常容易使用的Jquery代码，它们基本上切换为可见和不可见的div。<a id="toggle" href=

浏览 2提问于2011-06-24得票数 1

回答已采纳

1回答

使用php变量的Javascript切换显示底部div，而不是唯一的div。

、

下面的toggle function对切换没有问题，所以我知道div的id是为id工作的，切换函数可以在php变量中获取id。下面是两个版本的js切换函数，它们都可以工作，但是它们都可以处理上面的问题脚本1。var show; function sho

浏览 1提问于2014-02-15得票数 0

回答已采纳

3回答

在隐藏或显示中折叠在js中执行

、、

我编写了一些控制单元，通过使用类似于bootstrap的列表中的“折叠”类来切换两个容器，其中锚点具有专门用于隐藏容器的"href“属性，下面是两个可以描述行为的列表元素的示例：然后在html代码中，我使用了一些容器： <div id="switch_tables" class=&quo

浏览 4提问于2016-04-12得票数 1

3回答

如何在DIV多次显示文本框值

、

我试图在键盘上的div中的文本框中显示这个值。当我输入多个DIV时，我很难多次显示这个值，需要加载textbox值。它只显示在一个DIV中(第一个)--这是我的html和jquery代码。<input type="textarea" id="mytextarea"></textarea> <div id="preview"><

浏览 2提问于2015-01-16得票数 0

回答已采纳

2回答

验证+ prerender-spa-plugin

、、

因此，我使用带有“基线”布局的vuetify (来自文档：)。routes: [ '/about' ], ]生成的页面是正常的。我与SPA中的html内容进行了比较，结果是一样的。但是，当web服务器使用它时，菜单不起作用。这就像没有执行js来将事件附加到元素。如果有人受到启发的话？或者是一个更

浏览 0提问于2019-11-23得票数 2

6回答

通过单击相同的按钮，Javascript逐个切换多个div

、、、

因此，我的表单中有这段代码，我希望通过反复单击相同的按钮，一个接一个地切换每个div。但是当我点击这个按钮时，所有的东西都会出现，有没有办法通过点击同一个按钮来一个一个地切换它呢？<div id="msg2" class="hidemsg"> <label for="commentcont" class="control-

浏览 1提问于2016-03-31得票数 3

回答已采纳

1回答

从另一个元素切换类时的刺激JS错误

、

2.如果用户希望编辑数量，单击“amount_box”可切换数字垫的隐藏状态。export default class extends Controller { static classes = [ "change" ]在这种情况下，我会单击id="amount_box“。因此，我将数据控制器属性移到id=‘and _container’，其中包含正在单击

浏览 4提问于2022-10-14得票数 0

回答已采纳

1回答