动态网页？ （HTML DOM，js）

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，所以只要给它们两个类 - 'ex1' - 然后你通过一个名为getElementsByClassName('class-name')的javascript选择器选择它们[替换类-name包含实际的类名，在本例中为ex1]此函数获取具有此类名的所有元素并将它们存储在数组中。 然后执行按下按钮的逻辑。 当按下一个按钮时，你应该将所需div的显示设置为'block'[你应该将它默认为隐藏在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。