Javascript 将CSS、jQuery和HTML都包含在一个.HTML中

我一直在四处寻找，但我似乎找不到我要找的东西。我想将jQuery和CSS都包含在一个.html页面中，但我似乎无法让jQuery正常工作。我对编码并不陌生，但我对jQuery是新手。以下是我目前掌握的情况：

---

显然，我想在单击时切换类，只需更改div的宽度。

您没有从JSFIDLE侧栏中选择jquery。移除

<script src="jquery-1.11.2.js"></script>

或使用

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

这是新的。

试试我

有时候，这些都很重要

你的问题是关于css优先级的。让我们检查一下我的小提琴，使用firebug之类的工具。始终。

aboutMe和bodyAmendment都定义了宽度。toggleClass附加该类，因此您将使用。宽度：200px获胜，因此代码似乎什么也没做。试一试

.bodyAmendment{
    width: 100px !important;
}

---

或者其他组合，因此在两个类中没有定义相同的属性。

在创建fiddle时忽略了添加jQuery。这意味着你的代码没有被触发。此外，在使用CSS时，添加的最后一条规则优先，无论何时添加该类

.test2 {
    width: 100px;
    background-color: #F00;
}

.test1 {
    width: 200px;
    background-color: #F00;
}

HTML

CSS沿着文档级联，后面的每个规则优先于最后一个规则

---

我通常使用.php，并使用

<? include "includes/js.php"; ?>

---

在这个文件中，我有所有的脚本调用。使从一个文件更新整个站点变得更容易。

您很可能没有正确地包含jquery。我建议将google托管的jquery包含到您的html中。@wateriswet我已经尝试了很多方法，包括您的方法。似乎什么都没用。我知道JQuery是有效的，因为当我使用所有3个JSFiddle的工作表时，它会正常工作。因此，我唯一可能的想法是，我没有像您所说的那样正确地输入Jquery。fiddle之所以有效，是因为CSS以正确的顺序优先。如果你颠倒顺序，只要hi类被应用，hi中的所有规则都将优先于amend中的任何规则。这真的值得作为一个答案吗？它只不过是一个注释。请使用第二个选项，不要使用JSFIDLE，因为它在那里不起作用。将整个内容粘贴到html文件中，并尝试在浏览器上运行它。当我把它插入艾米的IDE时，事情就不那么顺利了。不太好用，但我会修修补补的。有趣的是，用这种方法刷新页面需要花费更长的时间。试试这个。将内容复制到html文件中，然后运行它。当属性值仅由字母组成时，它们并不重要。我不认为标点符号会使它失效。代码运行良好，只是将JQuery实现到HTML工作表中。如果可以使用最新版本的JQuery，您可以使用：我已经测试过了。“那就行了！”袋鼠说，“行了！现在知道如何找到与jQueryUI相关的类似链接了吗？我已经搜索了一些链接包含，但很可能它们不起作用。我会下载这个版本并选择相对路径。我已经告诉了大多数其他人。就我所见，编码是正确的。问题源于JQuery被包含到HTML中。我认为我没有正确地添加JQuery。这只是经典。

.test2 {
    width: 100px;
    background-color: #F00;
}

.test1 {
    width: 200px;
    background-color: #F00;
}

<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>

<? include "includes/js.php"; ?>