如何用另一塊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

回答

相關問題