在jQuery中使用addClass调用另一个文件中编写的CSS类
我想从 JQuery 函数（也是外部文件）调用在 CSS 文件中编写的 CSS 类。
它不起作用我想知道为什么：
jQuery：
/// <reference path="jquery-1.7.1.js" />
/// <reference path="jquery-1.7.1-vsdoc.js" />
/// <reference path="main_style.css" />
function gg() {
alert("zombie");
$("p").addClass("blood");
};
CSS：
.blood
{
color: Aqua;
background-color: Red;
border: 2;
font-weight: bold;
}
我在 jQuery 文件中添加了对 CSS 文件的引用，但我不明白为什么它找不到它并且没有更改所有段落。
但由于我看到僵尸警报，因此达到了“gg”功能。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="Scripts/main_style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/mon_script.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div>
<p>This is the first paragraph</p>
<p id="4">This is the second paragraph</p>
<p>This is the third paragraph</p>
<p class="blood">This is the fourth paragraph</p>
<input type = "button" value="Hi" onclick="gg()" />
</div>
</body>
</html>
I want to call a CSS class written in a CSS file from a JQuery function (external file too).
It doesn't work I wonder why :
jQuery :
/// <reference path="jquery-1.7.1.js" />
/// <reference path="jquery-1.7.1-vsdoc.js" />
/// <reference path="main_style.css" />
function gg() {
alert("zombie");
$("p").addClass("blood");
};
CSS :
.blood
{
color: Aqua;
background-color: Red;
border: 2;
font-weight: bold;
}
I added a reference to CSS file in the jQuery file and I don't uderstand why it doesn't find it and doesn't change all the paragraphs.
But the "gg" function is reached because I see the zombie alert.
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="Scripts/main_style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/mon_script.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div>
<p>This is the first paragraph</p>
<p id="4">This is the second paragraph</p>
<p>This is the third paragraph</p>
<p class="blood">This is the fourth paragraph</p>
<input type = "button" value="Hi" onclick="gg()" />
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要在包含 jquery 脚本的 html 文档（即 ASP.NET 中的 aspx 文件）中添加指向样式表 main_style.css 的链接。您指定的参考路径仅用于支持 IntelliSense。
如果 css 文件和 html 文件位于相同的相对位置（否则使用 css 文件的相对路径），HTML 文件中的样式表链接将如下所示：
You need to add a link to the stylesheet main_style.css in the html document (i.e. aspx file in ASP.NET) that includes your jquery script. The reference path you specified is just for supporting IntelliSense.
The stylesheet link in your HTML file would look like this if both css file and html file are in the same relative position (otherwise use a relative path to the css file):
该行：
...用于 Visual Studio 中的 Intellisense。它不会添加对 HTML 文件可以看到的 CSS 文件的引用。
您需要将其添加到您的 html
部分：我已经根据您的最新更新创建了一个工作示例：
演示：http://jsfiddle.net/ThinkingStiff/u39XR/
从那里开始工作。
The line:
...is for Intellisense in Visual Studio. It does not add a reference to the CSS file that your HTML file can see.
You need to add this to your html
<head>section:I've created a working sample from your latest update:
Demo: http://jsfiddle.net/ThinkingStiff/u39XR/
Work from there.