javascript - jQuery 不起作用,关于我如何包含它?

标签 javascript jquery html css

<分区>

我对这个社区以及一般的 jQuery/JavaScript 都是新手,但我只是花了一个小时进行研究,但我根本看不出哪里出了问题。

我试着做到这一点,当你点击某个东西时,它会改变它的类。

我的代码的重要部分是

HTML:

<div class="taskbar">
        <div id="taskbar-start" class="taskbar-start-inactive">
            <img class="taskbar-start-logo" src="img/logo.png" /> 
            <div class="taskbar-start-text">Start</div>
        </div>
</div>

CSS:

#taskbar-start {
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 2px;
    width: 90px;
    height: 33px;
    background-color: #C2C5CA;
    cursor: pointer;
}
.taskbar-start-inactive {
    box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
}
.taskbar-start-active {
    box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset;
}

JavaScript

$('#taskbar-start').click(function() {
    $(this).toggleClass('taskbar-start-active');
    alert("Yeah!");
});

这是行不通的。现在,我不想下载 jQuery 来使用它,因为一旦它完成我想使用代码作为 Tumblr 上的主题,我认为下载 jQuery 不会很好地工作。目前我有它,我的 JavaScript 文件如下所示:

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="javascript.js"></script>

我尝试了一段我在其他地方找到的代码来测试我的 jQuery 是否被加载(我忘记了我在哪里找到的,我很抱歉),这是

window.onload = function() {
if (window.jQuery) {  
    // jQuery is loaded  
    alert("Yeah!");
} else {
    // jQuery is not loaded
    alert("Doesn't Work");
}}

这似乎有效,但我的代码无效。不过,如果我将我的整个代码复制到这里并尝试一下,它就成功了,所以可能是因为尝试包含 jQuery?

就像我说过的,我是 super 新手,所以如果我的问题以某种方式被认为是愚蠢的,我真的很抱歉。

最佳答案

只需将您的代码放入document.ready as

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="javascript.js"></script>
<script>
    $(document).ready(function(){
        $('#taskbar-start').click(function() {
            $(this).toggleClass('taskbar-start-active');
            alert("Yeah!");
        });
    });
</script>

关于javascript - jQuery 不起作用,关于我如何包含它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45258083/

相关文章:

javascript - 将单文件 .vue 组件转换为 JavaScript?

javascript - memoized 函数上的 setTimeout

javascript - 如何用php删除垃圾图标glyphicon

javascript - jQuery 不在下拉菜单上触发更改事件

html - 固定在屏幕左侧的侧边栏和带有边距 : 0 auto 的中间内容

javascript - 如何只允许滚动条滚动

Javascript:显示消息的目标图像 ID

javascript - 如何通过 ajax 将 javascript 对象发送到 php?

javascript - 不显示输入字段的默认值

html - 使用XPath/Hpple/Objective-C获取href值