动态网页？ （HTML DOM，js）

Posted 2023-03-05

【中文标题】动态网页？ （HTML DOM，js）

【英文标题】：Dynamic webpage? (HTML DOM, js)

【发布时间】：2018-10-13 20:12:03

【问题描述】：

我正在尝试使用 DOM JS 更改 html 中的内容。我不想通过 P 标签获取元素，而是使用 DIV ID。这可能吗？

在我的 HTML 中，我有两个独立的 DIV 类，它们的名称相同。我希望根据用户单击的按钮显示一个。

HTML：

<button type="button" onclick="changeContent(1)" >Example 1</button>
<button type="button" onclick="changeContent(2)" >Example 2</button>

<p id="demoX"></p>

<div class="ex1">
<h1> Example 1 </h1>
<p> nothing </p>
</div>

<div id="ex1">
<h1> Example 2 </h1>
<p> more of nothing </p>
</div>

JS：

function changeContent(inNum) 
    var x = document.getElementById("ex1");

    if (inNum == 1)
         document.getElementById("demoX").innerHTML = x[0].innerHTML;
    
    else if (inNum == 2)   
     document.getElementById("demoX").innerHTML = x[1].innerHTML;
    

我该如何处理？

【问题讨论】：

getElementById 返回一个 single 元素，因为 ID 应该是唯一的。您可以更改类的 ID 并使用 getElementsByClassName（注意 Elements 的复数形式）。

试一试，作为一种享受！谢谢

【参考方案1】：

首先，您不应该为多个 div 提供相同的 ID，因此只需为它们都提供类 - 'ex1' - 然后通过名为 getElementsByClassName('class-name') 的 javascript 选择器选择它们 [replace class-name使用实际的类名，在本例中为 ex1]，此函数获取具有该类名的所有元素并将它们存储在一个数组中。然后您执行按下按钮的逻辑。当按下按钮时，您应该将所需 div 的显示设置为“阻止”[您应该在 CSS 中将其默认为隐藏]。

function showDiv(id) 
  
  var divs = document.getElementsByClassName('ex1');
  
  if (id === 'btn1')  divs[0].style.display = 'block' 
  if (id === 'btn2')  divs[1].style.display = 'block' 
  

.ex1 
  width: 300px;
  height: 300px;
  background-color: green;
  display: none;
  margin: 50px;

<button id='btn1' onClick='showDiv(this.id)'>button 1</button>
<button id='btn2' onClick='showDiv(this.id)'>button 2</button>

<div class='ex1'>I'm div 1</div>
<div class='ex1'>I'm div 2</div>

您也可以像在原始代码中所做的那样更改 .style 以更改内部 html。