为什么我的javascript不能工作
Why isnt my javascript working?
我所有的代码似乎工作除了我的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;
}
谢谢!
詹姆斯您正在使用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>
您还没有将库(我认为是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元素中删除然后添加相同的类的用法
首先,您没有在代码中包含指向jQuery库的链接。因此,无论你把代码放在哪里,它都不能工作。
其次,由于您的代码位于文档head
的script
元素中,因此它将在呈现文档的body
之前执行。你需要把它放在
$(document).ready(function() {
/*
* Your code here
*/
});
。
试试这个:
$('.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/相关文章:
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JS可以在Chrome中工作,但不能在Firefox中工作
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- Facebook登录按钮没有'不能在Firefox上工作
- jQuery Datepicker可以在Safari中工作,但不能在FF或Chrome中工作
- javascript没有´我不能在joomla 3.0中工作
- 用javascript将script元素附加到头部;铬不能工作
- jQuery函数不能只在一个页面上工作
- 为什么这个代码不能正常工作
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- 为什么Turbolinks不能正常工作?Rails应用程序
- jQuery dosn'内联函数不能按预期工作
- 为什么这个javascript工作不能正确地分配.cells[] ?
- 谷歌应用引擎云端点:OAuth2不工作.不能加载api
- 输入焦点不工作/不能选择单选按钮-引导
- LocalStorage不能在iPhone上工作-不能在私人浏览
- 工作不能代替生活