Question

所以我试图创建一个页面，我单击一个按钮，它旁边的div的HTML代码会发生变化。基本上，我希望能够单击一个链接，我的代码在div中更改。

以下是两个不同的HTML代码：

第一名：（id = contentPOP）

<div id="contentPOP">
            <h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3>
            <iframe width="500" height="300"    
                    src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
                    frameborder="0" allowfullscreen>   </iframe>
                <br>
            <h3>Remembering Steve Jobs</h3>
             <iframe width="500" height="300"
                     src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"    
                     frameborder="0" allowfullscreen></iframe>
        </div>

第二名（id =“contentNEW”）

<div id="contentNEW">
          <h3>Slow Motion War!</h3>
            <iframe width="500" height="300" 
                    src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
                    frameborder="0" allowfullscreen></iframe>
            <br>
            <h3>1 Year Aniversary of Teddy Bear Productions!</h3>
            <iframe width="500" height="300" 
                    src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
                    frameborder="0" allowfullscreen></iframe>
        </div>

Here is an example of all the code

注意：我不知道如何做到这一点，所以详细解释会非常有帮助。此外，我希望能够只用JS，没有JQuery

来做到这一点

Answer 1

首先，取消注释以下内容，以便它存在于页面上：

<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE
<div id="contentNEW">
  ...
</div>
-->

而是用CSS隐藏它：

#contentNEW { display: none; }

然后将以下内容添加到newVids()函数中：

function newVids() {
  // target the div you want to change
  var div = document.getElementById('contentPOP');
  // replace its innerHTML with the innerHTML of the hidden div
  div.innerHTML = document.getElementById('contentNEW').innerHTML;
}

这对于你正在尝试做的事情来说真的是一种糟糕的方式。你不应该考虑切换每个div的可见性，而不是用另一个替换一个。

Answer 2

听着，这很容易完成。将两个代码块包装在自己的div中，并为它们提供唯一的ID，以便您可以在jquery中将它们作为目标。初始隐藏的，将附加display:hidden类，然后您可以使用切换来切换。简单！

HERE IS AN EXAMPLE!!!

祝你好运！

HTML

<p>This is a paragraph.</p>
<p class="hidden">This is a second paragraph.</p>
<button>Toggle </button>

CSS

  .hidden{
     display:none;
  }

JS

$(document).ready(function(){
$("button").click(function(){
   $("p").toggle();
   });
});

如何用另一块HTML替换HTML使用JS

2 个答案: