Question

我在使用jquery脚本和代码时遇到麻烦。有我的代码，我不知道为什么它不起作用？

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jsproj</title>
    <link type="text/css" rel="stylesheet" href="jsproj.css">
    <script src="jsproj.js"></script>
</head>
<body>
<ul id="nav">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

</body>
</html>

css文件：

#nav li /* this is the off state */
{
    background: #79ff3a;
}

#nav li.active
{
    background:red;
}

最后是jquery脚本：

$(document).ready(function(){

    $('#nav li').on('click', function(){
        //$(this).addClass('active').removeClass('off').siblings().addClass('off').removeClass('active'); // no need to add .off
        $(this).addClass('active').siblings().removeClass('active');

    });
})

我的电脑规格： 1- windows 8 64位 2-我已经安装了节点js和brew ...

Answer 1

您忘记在标题中添加jQuery库，在head标记中添加此行。

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

＆＃13;

$(document).ready(function(){

    $('#nav li').on('click', function(){
        //$(this).addClass('active').removeClass('off').siblings().addClass('off').removeClass('active'); // no need to add .off
        $(this).addClass('active').siblings().removeClass('active');

    });
})

＆＃13;

#nav li /* this is the off state */
{
    background: #79ff3a;
}

#nav li.active
{
    background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

＆＃13;

我无法更改列表中的活动类

1 个答案: