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

时间:2015-10-16 07:08:57

标签: javascript

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

我的所有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;
}

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

4 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

标题应该加载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并加载它。

答案 3 :(得分:0)

您正在使用 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

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