CSS类不按预期工作
我的HTML代码没有实现CSS样式.. CSS文件中的边框没有实现。 我试过FirefoxIE。请提供您的输入。CSS类不按预期工作
请找到下面的代码:
HTML
<html>
<head>
<link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet">
</head>
<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js" type="text/javascript"></script>
<script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script>
</body>
</html>
JS文件
$(document).ready(function() {
$("#btn1").click(function(){
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click(function(){
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});
CSS文件
.hover{
border: solid #f00 3px;
}
.no_hover{
border: solid #000 3px;
}
这里有一些代码可以帮助你使用你的jQuery或清理它。不要深入DOM乘法时间。如果你是然后创建一个变量。你也可以链接你的事件。它看起来像你刚刚开始jQuery,所以当你更多地了解它时,你会学到这一点。希望这可以帮助。
$(document).ready(function() {
var header = $("#header");
$("#btn1").on("click", function() {
header.addClass("hover").removeClass("no_hover");
});
$("#btn2").on("click", function() {
header.removeClass("hover").addClass("no_hover");
});
});
这个问题可能是一个事实,即你是链接到文件作为文件系统的路径...您想要将CSS
和JS
文件链接为您的Web服务器的虚拟路径。
您的代码有效。看到这个小提琴:http://jsfiddle.net/pratik136/x4zda/
我试着在你的小提琴,但它不工作..看起来像一个浏览器问题..我需要在我的浏览器上启用任何东西。 – user1050619 2012-04-27 17:10:48
你使用什么浏览器?我尝试过Chrome,FF和IE9 – bPratik 2012-04-27 17:11:27
它适用于Firefox-11.0,而不适用于IE-9。 – user1050619 2012-04-27 17:12:35
当您本地化您的js
和CSS
文件时工作正常。
尝试下面的代码,其中包括一个网页内的一切。
<html>
<head>
<style type="text/css">
#header {}
.hover{
border: solid #f00 3px;
}
.no_hover{
border: solid #000 3px;
}
</style>
</head>
<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click(function() {
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});
</script>
</body>
</html>
是否浏览器的错误控制台打印一个错误,它无法收集样式表?我猜是这样。也许它有助于在'file://'后面添加第三个斜杠。 – YMMD 2012-04-27 17:03:51
你真的需要两种风格吗?如果他们正在重新定义相同的事物(边界),则只需要颠倒CSS .hover和.no_hover的顺序,然后切换.hover,因为它将替换.no_hover(由于默认的.no_hover而导致反向) – 2012-04-27 17:26:10
猜想边框的简写是: border:1px#000 solid; – KBN 2012-04-27 17:26:18