Javascript onClick和mouseOver功能

Question

我想在我的網站上使用onclick和mouseover，但是當我嘗試onclick它不會工作。 我想在點擊時更改文本的背景顏色，但它會立即更改爲之前的顏色。

這裏是我的html：

<a id="a" class="a" href="bereka.html" onclick="myFunction()">HOME &nbsp;</a> 

這裏是我的a CSS類：

.a 
    { 
     font-size:20px; 
     color:#FFF; 
     text-align:center; 
     text-decoration:blink; 
     padding-right:20px; 
    } 

而下面是我與ida

function myFunction() { 
    document.getElementById("a").style.backgoundcolor = "#000"; 
} 

Answer 1

的JavaScript腳本病例敏感，你也犯了一個錯字。 backgoundcolor應該是backgroundColor（大寫字母C在Color和r在background）。

Answer 2

你在頁面上有一個鏈接，你點擊它，頁面導航。鏈接背景顏色將不會應用於下一頁加載。

要使鏈接對應於當前頁面，您需要向該元素添加一個類，以便以不同方式對其進行設置。

Answer 3

您將您的點擊事件綁定爲鏈接的元素是鏈接，默認情況下，鏈接將導航到其href屬性中指定的網址，或者在缺少該鏈接時導致頁面刷新。

如果要防止默認操作，從而只執行你的函數，你應該在事件對象上設置了preventDefault爲true，像這樣：

function myFunction(event) { 
    document.getElementById("a").style.backgoundcolor = "#000"; 
    event.preventDefault = true; 
} 

Answer 4

你的代碼是一個有點不對勁。錯字和功能。試試這個：

function myFunction(e) { 
    document.getElementById("a").style.backgroundcolor = "#000"; 
    e.preventDefault = true; 
    return false; 
} 

Answer 5

首先你的代碼不正確。另外從你的html中刪除onclick，我想你正在使用jQuery，因爲你添加了標籤jquery，所以使用下面的代碼，而不是onclick。

$(document).ready(function(){ 
    $('#yourLink').on('click', function(e){ 
     //your code 
     document.getElementById("a").style.backgroundcolor = "#000"; 
     e.preventDefault = true; 
     return false; 
    }); 
}); 

這應該工作。希望它是幫助！

Answer 6

您可以使用CSS來處理mouseOver和訪問過的鏈接，這通常比使用javascript更清晰。 a:visited可讓您更改訪問過的鏈接的樣式，並且當您將鼠標懸停在其上時，a:hover會更改鏈接的樣式。下面是引用幾個環節：

http://www.w3schools.com/cssref/sel_hover.asp http://www.w3schools.com/cssref/sel_visited.asp