Question

我的所有代码似乎都工作，除了我的javascript我做错了什么？谢谢我只是一个初学者！

我试图在鼠标移过“标签”标签时进行背景更改，但它不会这样做？发生了什么事？

HTML：

<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");  
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});


// This changes color when clicked, removed old color box. 
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>

</body> 
</html>

CSS：

.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}

.tab-mouseover {
background: #bdbdbd;
}

.tab-selected {
background: #c0c0c0; 
}

谢谢！

詹姆斯

Answer 1

您正在使用jQuery但尚未包含它。您还需要将jquery代码放入jquery ready事件：

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.

$(function(){
    $('.tab-item').mouseover(function() {
        $(this).addClass("tab-mouseover");  
    }).mouseout(function() {
        $(this).removeClass("tab-mouseover");
    });


// This changes color when clicked, removed old color box. 
    $('.tab-item').click(function() {
        $('.tab-item').removeClass("tab-selected");
        $(this).addClass("tab-selected");
    });
});
-->
</script>

Answer 2

你还没有在这里添加你的库（jQuery，我认为）。像这样添加：

<script src='http://foo.com/bar/library.js'></script>

如果您确实使用jQuery，则可以直接添加以下代码以使其正常工作：

<script src='http://code.jquery.com/jquery-1.6.4.js'></script>

请注意，上述意味着您取决于jQuery网站的可用性，而不是您自己的。

根据James对此的评论，是的，你可以完全废弃jQuery，但我建议你自己学习JavaScript，而不是从网站上复制代码。如果要更改onmouseover字段的背景颜色，请使用以下代码：

<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>

或者

<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>

或者没有JavaScript而只是简单的CSS：

<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>

我无法回答后一部分，因为我不理解使用删除然后将相同的类添加到元素onclick。

Answer 3

首先，您没有在代码中包含指向jQuery库的链接。因此，无论您将代码放在何处，您的代码都无法使用。

其次，由于您的代码位于文档script的{{1}}元素中，因此它将在文档的head呈现之前执行。你需要把它放在

中

body

块。

Answer 4

试试这个：

$('.tab-item').hover(
    function() {
        $(this).addClass('tab-mouseover');
    },
    function() {
        $(this).removeClass('tab-mouseover');
    }
);

$('.tab-item').click(function() {
    $('.tab-selected').removeClass('tab-selected');
    $(this).addClass('tab-selected');
});

http://jsfiddle.net/7dDTv/1/

为什么我的javascript不工作？

4 个答案: