将CSS，jQuery和HTML全部整合到一个.html中

Including CSS, jQuery, and HTML all into one .html

本文关键字：一个 html jQuery CSS HTML 全部      更新时间：2023-09-26

我一直在四处寻找，但我似乎找不到我要找的东西。我想将我的jQuery和CSS都包含在一个.html页面中，但我似乎无法让jQuery工作。我对编码并不陌生，但我对jQuery很陌生。这是我到目前为止所拥有的：

http://jsfiddle.net/b63nLkfa/1/

<div class=aboutMe>aboutMe</div>
<style>
    .bodyAmendment{
        width:100px;
    }
    .aboutMe{
        background-color: #CCCCCC;
        height:250px;
        width:200px;
        color: white;
        font-size:32px;
    }
</style>
<script src="jquery-1.11.2.js"></script>
<script>
    $(document).ready(function() {
        $('.aboutMe').click(function() {
            $(this).toggleClass('bodyAmendment');
        });
    });
</script>

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

你没有从jsfiddle侧边栏中选择jquery。并删除 

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

或使用 

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

这是新链接。

aboutMe和bodyAmendment都定义了宽度。 toggleClass()附加类，因此您最终会得到<div class="aboutMe bodyAmendment">。 width: 200px"获胜"，因此代码似乎什么都不做。 尝试

.bodyAmendment{
    width: 100px !important;
}

或其他一些组合，因此您不会在两个类中定义相同的属性。

http://jsfiddle.net/b63nLkfa/1/

.aboutMe{
    background-color: #CCCCCC;
    height:250px;
    width:200px;
    color: white;
    font-size:32px;
}
.bodyAmendment{
     width:100px;
}

你的问题是关于css优先级的。让我们检查一下我的小提琴并使用萤火虫等工具。总是。

你在创建小提琴时忽略了添加jQuery。这意味着您的代码未触发。此外，在使用 CSS 时，无论何时添加类，最后添加

的规则优先。 
.test2 {
    width: 100px;
    background-color: #F00;
}
.test1 {
    width: 200px;
    background-color: #F00;
}

.HTML

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

CSS 沿文档向下"级联"，每个后来的规则优先于最后一个规则。

http://jsfiddle.net/b63nLkfa/21/

我通常使用.php，并使用

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

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

尝试<div class="aboutMe">aboutMe</div>

有时" "很重要

相关文章：