將類添加到給定元素不起作用？

我想在我的項目中使用vanilla js。我有一些功能，我對其中一個有問題。腳本的思想是：點擊主頁面上的鏈接，重定向到其他頁面;將類添加到＃div1。當我點擊一個鏈接並將其重定向到其他頁面時 - 沒有任何提示。我找不到我做錯了。從主頁將類添加到給定元素不起作用？

HTML：

<div class="row" id="div1"></div> 
<div class="row" id="div2"></div>

window.onload = function() { 
    var hideDivOne = document.getElementById("div1"), 
     View = document.getElementById("view"); 

    function swap() { 
     hideDivOne.className += " notdisplayed"; 
    } 

    if(View){ 
     View.addEventListener("click", swap, false); 
    } 
}

CSS

.notdisplayed {display:none;}：從其他網頁

<a href="pagelink" id="view">text</a>

HTML取而代之的

hideDivOne.className += " notdisplayed";

來源

2017-05-16 Olchus

http://stackoverflow.com/a/196038/1838811 – afuous

哪裏是你的JS？它是鏈接到您的主頁面還是鏈接到其他頁面？ – Badacadabra

@Badacadabra JS鏈接到主頁和其他頁面 – Olchus

嘗試：

hideDivOne.classList.add("notdisplayed");

，如果你想刪除這個類：

hideDivOne.classList.remove("notdisplayed");

或撥動類：

hideDivOne.classList.toggle("notdisplayed");

來源

2017-05-16 22:15:42

問題是該功能不起作用。我不確定，但可能因爲重新加載而發生這種情況？可能嗎？ – Olchus

您的代碼沒有意義...在另一頁上，View是null，因爲您的鏈接不在HTML中了！因此，什麼都不執行，這不是你想要的。

事實上，你的主頁不需要JS。僅僅通過把正確的URL在href屬性使用HTML鏈接的原始行爲：<a href="other_page.html" id="view">text</a>

當你在其他頁面上，你可以使用style屬性隱藏股利。看看這個演示：

.row { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#div1 { 
 
    background-color: red; 
 
} 
 

 
#div2 { 
 
    background-color: blue; 
 
}

<div class="row" id="div1"></div> 
 
<div class="row" id="div2"></div>

window.onload = function() { 
 
    document.getElementById("div1").style.display = 'none'; 
 
};

.row { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#div1 { 
 
    background-color: red; 
 
} 
 

 
#div2 { 
 
    background-color: blue; 
 
}

<div class="row" id="div1"></div> 
 
<div class="row" id="div2"></div>

來源

2017-05-16 23:20:17 Badacadabra

但是...如何「text」不是HTML？我不需要在典型頁面重新加載後隱藏div。當我點擊主頁上的超鏈接並將其重定向到其他頁面時，我想隱藏它。 – Olchus

將類添加到給定元素不起作用？

回答

相關問題