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

-1

所以我试图做一个页面，我点击一个按钮并且它旁边的div的HTML代码发生了变化。从本质上讲，我希望能够点击一个链接，我的代码在div中发生变化。如何用另一块HTML代替HTML使用JS

这里有两种不同的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

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

来源

2014-11-24 TheCoderWhoLikesToCode

你能告诉我们你到目前为止的JavaScript吗？ – thatidiotguy 2014-11-24 18:34:12

不错的努力，你有没有试过谷歌的东西，如“JavaScript替代HTML”？ – Vland 2014-11-24 18:35:05

我现在没有任何JS，因为我不知道如何尝试这个。我一直在寻找w3schools的一些帮助，没有用 – TheCoderWhoLikesToCode 2014-11-24 18:35:25

听着，这很容易做到。将两个代码块都包装到自己的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; 
    }

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

来源

2014-11-24 19:05:26 LOTUSMS

你是唯一一个wrks，所以我会接受它。但是，我真的不明白JQuery所以没有upvote – TheCoderWhoLikesToCode 2014-11-26 00:45:25

首先，取消注释以下，因此存在在页面上：

<!--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的可见性，而不是将其替换为另一个。

来源

2014-11-24 19:05:35 izolate

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

回答

相关问题