使用 jquery 进行键导航

Keynavigation using jquery

本文关键字：导航 jquery 使用      更新时间：2023-09-26

我想使用键导航，发现这个看起来非常漂亮的库：点击这里。我已经开始尝试并创建了以下HTML代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Key navigation</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://nekman.github.io/keynavigator/keynavigator.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <ul id="navigateTest">
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </ul>
</body>
</html>

当然还有下面的Javascript代码（index.js）： 

$(document).ready(function() {
   $('ul#navigateTest li').keynavigator(/* optional settings */);
});

但是当我运行项目时，关键导航 dosent 工作。我通过 dosent 工作定义的是，我正在执行库会向元素添加一些样式以显示所选元素。我是否需要将某种 css 样式应用于代码？

当然，你需要做的是向当前选定的HTML元素添加一些css样式，方法是告诉javascript你应该添加到HTML元素中什么css类名。

创建一个 css 文档并在其中包含一个类，如下所示： 

.test{
    font-weight: bold;
}

然后引用HTML中的css当然是这样的： 

<link rel="stylesheet" type="text/css" href="super.css">

最后，告诉 javascript 要添加到 html 元素中的类： 

$(document).ready(function() {
    $('ul#navigateTest li').keynavigator({activeClass: "test"});
});
相关文章：