使用javascript突出显示选定的列表项

Highlighting selected list item using javascript

本文关键字：列表 显示 javascript 使用      更新时间：2023-09-26

我知道，这个问题被问了无数次，但我就是不能让它工作。

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

下面-我的代码，但我也在这里疯了。

代码在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;
}

任何帮助将非常感激!

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

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

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

Header应该加载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，因此您需要提供到库的链接以使您的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。

您还必须在浏览器控制台中看到一个'ready'消息

相关文章：