html css 和 js 不起作用

Question

这是我的代码：

<!doctype html>
<html lang="en-US">
<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>
</head>
<body class="menu">
    <header>
        <a href="#" class="menu-toggle">Toggle</a>
        <nav class="menu-side">
            This is a side menu
        </nav>
    </header>
    <p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
    <p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>

css：

    .menu-side{
    background: #333;
    border-right: 1px solid #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}
.menu{
    overflow-x:hidden;
    position: relative;
    left: 0px;
}
.menu-open {
    left: 231px;
}

和jQuery：

(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    return false;
});
})();

我正在使用 Brackets 程序来编写我的代码，但是当我在保存所有内容并按“切换”后转到实时视图时，页面不会移动，我查看了所有内容，我 98% 确定它是正确的。

Answer 1

如果你想使用它，你需要包含 jQuery。

添加这一行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

在您的 html 中或在您使用 jQuery 之前！

例如

<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>

Answer 2

将<script src="Home.js"></script>放在</body>标签之前。

我又做了一堂课

.menu-side-open{
    left:0px;
}

和 JQuery

(function () {
var body = $('body');   
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    $('.menu-side').toggleClass('menu-side-open');
    return false;
});
})();

还添加了

.menu, .menu-side{
    transition: 300ms;
}

一张漂亮的幻灯片:)

JSFiddle 演示

Answer 3

改变这个：

body.toggleClass('menu-open');

对此：

$('.menu-side').toggleClass('menu-open');

并将.menu-open css 类更改为：

.menu-open {
    top:10%;
    left: 0px;
}

这是JSFiddle演示

它是隐藏在左侧的.menu-side 。 因此，您应该将menu-open类应用于.menu-side而不是body标签。

您的 CSS 将.menu-side的左侧设置为 231px，将其设置回 0px 就足以使菜单重新出现在视图中。 当菜单出现时，它覆盖了“切换”链接，因此我还将top:10%添加到.menu-open类 CSS。

Answer 4

我认为这与计算机中丢失的文件有关。 我的电脑也有同样的问题，你是否将 CSS 和 JS 放入 HTML 页面并不重要。 结果将是相同的。 当您在浏览器中打开页面时，您不会看到任何更改，如果我按 F12，它会显示：无法加载资源：net::ERR_FILE_NOT_FOUND 或 dll 文件未找到或类似内容

html css 和 js 不起作用

问题描述

4 个解决方案

解决方案1
1 2015-08-09 18:24:03

解决方案2
1 已采纳 2015-08-09 19:34:57

解决方案3
0 2015-08-09 18:40:51

解决方案4
0 2020-11-19 07:29:41

html css 和 js 不起作用

问题描述

4 个解决方案

解决方案1 1 2015-08-09 18:24:03

解决方案2 1 已采纳 2015-08-09 19:34:57

解决方案3 0 2015-08-09 18:40:51

解决方案4 0 2020-11-19 07:29:41

解决方案1
1 2015-08-09 18:24:03

解决方案2
1 已采纳 2015-08-09 19:34:57

解决方案3
0 2015-08-09 18:40:51

解决方案4
0 2020-11-19 07:29:41