Question

我尝试使用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;
    }

}

我该如何处理？

Answer 1

首先，你不应该给多个div提供相同的ID，所以只要给他们两个类 - ＆＃39; ex1＆＃39; - 然后通过名为getElementsByClassName('class-name')的javascript选择器选择它们[用实际类名替换class-name，在本例中为ex1]此函数获取具有此类名的所有元素并将它们存储在数组中。然后执行按下按钮的逻辑。按下按钮时，您应该将所需div的显示设置为＆＃39; block＆＃39; [你应该默认它隐藏在CSS中]。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您也可以像原始代码一样更改.style内容以更改内部html。

动态网页？（HTML DOM，js）

1 个答案:

动态网页？ （HTML DOM，js）

1 个答案:

动态网页？（HTML DOM，js）