Question

我知道，这个问题就像千万次一样被问到，但我无法让它发挥作用。

我的所有html，css和js文件都位于同一个文件夹中。

下面 - 我的代码，但我也疯了jsfiddle here。

代码在JSfiddle中运行良好，但在我的计算机上无法工作，所以我认为它可能是我的html头并链接到javascript文件，但它似乎是正确的。

我的html文件的标题：

 <head>
   <title>Nacionālie dārgumi</title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="script.js"></script>
 </head>

这是我的HTML：

<div class="menu">
        <ul class="main-menu">              
            <li><a class = "main_men_links" href="about.html">PAR PROJEKTU</a></li>
            <li><a class = "main_men_links" href="">NACIONĀLIE DĀRGUMI</a></li>
            <li><a class = "main_men_links" href="">SASNIEGUMI</a></li>
            <li><a class = "main_men_links" href="">SĀKUMS</a></li>
        </ul>   
    </div>

这是我的script.js：

$(function(){
    console.log('ready');

    $('.main-menu li').click(function(e) {
        e.preventDefault()

        $that = $(this);

        $that.parent().find('li').removeClass('active');
        $that.addClass('active');
    });
})

这是我的style.css：

.active {
    background: black;
}

任何帮助将受到高度赞赏！

Answer 1

我认为你在html head部分没有jquery库。像这样使用CDN <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

尝试在主脚本声明之前添加。此链接仅在您连接到Internet或下载文件以便在本地使用时才有效。

Answer 2

请检查您是否在HTML的Header部分中包含了Jquery.js的引用。因为，如果您在script.js加载之前没有使用jquery.js，那么您的脚本文件将无法运行。

Answer 3

标题应该加载jquery。

您可以尝试如下：

<head>
   <title>Nacionalie dargumi</title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="script.js"></script>
 </head>

或下载jquery.min.js并加载它。

Answer 4

您正在使用 jQuery ，因此您需要提供指向库的链接以使 script.js 正常工作。确保按此顺序添加CDN库和本地 script.js 。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="script.js"></script>

浏览器中的

按 F12 并选中标签来源（在Chrome中）或 调试器（在Firefox中）以确保加载 script.js 。

您还必须在浏览器控制台中看到“就绪”消息。

使用javascript突出显示所选列表项

4 个答案: