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;
   }

以下是我的id a

脚本

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

Answer 1

JavaScript区分大小写，您也犯了错字。 backgoundcolor应为backgroundColor（Color中的资本C和background中的 r ）。

Answer 2

您在页面上有一个链接，您单击它并页面导航。链接背景颜色将不会应用于下一页加载。

要使链接对应于当前页面，您需要向该元素添加一个类，以便您可以采用不同的方式设置它。

Answer 3

您可以使用CSS来处理mouseOver和访问过的链接，这通常比使用javascript更干净。 a:visited可让您更改已访问链接的样式，a:hover会在您将鼠标悬停在链接上时更改链接样式。以下是一些参考链接：

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

Answer 4

您将点击事件绑定到的元素是一个链接，默认情况下，链接将导航到其href属性中指定的URL，或者如果没有，则会导致页面刷新。

如果你想阻止默认操作，因此只执行你的函数，你应该将事件对象的preventDefault设置为true，如下所示：

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

Answer 5

你的代码有点不对劲。错字和功能。试试这个：

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

Answer 6

首先你的代码不正确。同时从你的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;
    });
});

那应该有用。希望它有所帮助！

Javascript onClick和mouseOver函数

6 个答案: