为什么我的JavaScript不起作用？

Question

All my code seems to work except my javascript am I doing something wrong? 我的所有代码似乎都可以正常工作，除了我的JavaScript之外，我是否做错了什么？ Thanks Im only a beginner! 谢谢林只是一个初学者！

I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? 当鼠标悬停在“标签”标签上时，我正在尝试更改背景，但不会这样做吗？ What is going on? 到底是怎么回事？

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

Thanks! 谢谢！

James 詹姆士

Answer 1

You're using jQuery but haven't included it. 您正在使用jQuery，但尚未包含它。 You also need to put your jquery code into the jquery ready event: 您还需要将您的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

You haven't added your library (jQuery, I think) as a source here. 您尚未在此处添加您的库（我认为是jQuery）作为源。 Add it like this: 像这样添加：

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

If you are, indeed using jQuery, you can directly add the following code to make it work: 如果确实使用jQuery，则可以直接添加以下代码以使其工作：

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

Note that the above means you are depending on the availability of the jQuery website and not your own. 请注意，以上内容意味着您取决于jQuery网站的可用性，而不是您自己的网站。

As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. 根据James对此的评论，是的，您可以完全删除jQuery，但是我建议您自己学习JavaScript，而不是从网站上复制代码。 If you want to change the background color of the field onmouseover, use code like this: 如果要在鼠标悬停时更改字段的背景色，请使用如下代码：

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

Or 要么

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

Or without JavaScript and just simple CSS: 或不使用JavaScript而仅使用简单的CSS：

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

I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick. 我无法回答后一部分，因为我不理解删除然后将相同的类添加到元素onclick的用法。

Answer 3

Well, first, you haven't included a link to the jQuery library in your code. 好吧，首先，您没有在代码中包含指向jQuery库的链接。 As a result, your code won't work, wherever you put it. 结果，无论放置在哪里，您的代码都将无法工作。

Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. 其次，由于您的代码位于文档head的script元素中，因此它将在呈现文档body之前执行。 You need to put it in a 您需要将其放入

$(document).ready(function() {

    /*
     * Your code here
     */
});

block. 块。

Answer 4

Try this: 尝试这个：

$('.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/ http://jsfiddle.net/7dDTv/1/

为什么我的JavaScript不起作用？

问题描述

4 个解决方案

解决方案1
4 已采纳 2011-10-11 18:05:04

解决方案2
3 2011-10-11 18:04:40

解决方案3
1 2011-10-11 18:06:40

解决方案4
0 2011-10-11 18:08:29

为什么我的JavaScript不起作用？

问题描述

4 个解决方案

解决方案1 4 已采纳 2011-10-11 18:05:04

解决方案2 3 2011-10-11 18:04:40

解决方案3 1 2011-10-11 18:06:40

解决方案4 0 2011-10-11 18:08:29

解决方案1
4 已采纳 2011-10-11 18:05:04

解决方案2
3 2011-10-11 18:04:40

解决方案3
1 2011-10-11 18:06:40

解决方案4
0 2011-10-11 18:08:29