使用Javascript更改div

使用純Javascript我想要創建選項卡效果以在div中切換內容。內容是我想從使用Javascript更改div

  <script> 
      function changeClass(element) { 

       if (classList !=='active') { 
        element.classList.add('active'); 
       } 
       else { element.classList.remove('active'); } 
      } 
      </script> 
      <ul> 
       <li onclick = "changeClass("content")">

來源

2014-03-30 user3219182

你爲什麼不試試jQuery的這個？ – Shin

請參閱如何使用['classList']（https://developer.mozilla.org/en-US/docs/Web/API/Element.classList）。 – Teemu

我同意@shijin ...在這個例子中，jQuery會更容易。 –

錯誤添加或刪除第二類活躍類的名字是，你不選擇任何元素（不知道爲什麼沒有抓住這一點），但嘗試更改字符串的類列表（"content".classList...）。請確保您先選擇合適的元素：

function changeClass(element) { 
    element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one 
    if (!element.classList.contains('active')) { // had to fix this as variable classList wasn't defined 
     element.classList.add('active'); 
    } 
    else { 
     element.classList.remove('active'); 
    } 
}

而且，@Teemu的意見建議，但拒絕寫，隨意使用element.classList.toggle('active');。所以整個代碼應該是：

function changeClass(element) { 
    element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one 
    element.classList.toggle('active'); 
}

來源

2014-03-30 08:43:28 Shomz

如果你想簡單的類toggle兩者之間，你可以做這樣的事情：

function changeClass(element) { 
    element.classList.toggle('Content'); 
}

雖然在這種情況下，你已經通過參考到元素而不是className。

來源

2014-03-30 08:43:38 Teemu

有趣的是，你如何獲得+1而不解決實際的錯誤。 – Shomz

@Shomz我認爲這是你的upvote :)）。其實我的回答也有錯誤（至少與OP的代碼相比）。 – Teemu

哈哈，不，你沒有在我發佈我的帖子時發佈的答案，這就是爲什麼我提到你在我的。是的，我想我們現在已經全部覆蓋了。這是我現在的一個。 – Shomz

使用Javascript更改div

回答

相關問題