jquery.nav.js 使用
时间: 2023-06-11 12:06:20 浏览: 61
jQuery.nav.js是一个轻量级的jQuery插件,用于创建可定位的导航菜单。
使用步骤如下:
1. 引入jQuery和jQuery.nav.js:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.nav/3.0.0/jquery.nav.min.js"></script>
```
2. 编写HTML结构:
```html
<nav>
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</nav>
<section id="section-1">
<h2>Section 1</h2>
<p>Content goes here...</p>
</section>
<section id="section-2">
<h2>Section 2</h2>
<p>Content goes here...</p>
</section>
<section id="section-3">
<h2>Section 3</h2>
<p>Content goes here...</p>
</section>
```
3. 初始化插件:
```javascript
$(document).ready(function() {
$('nav').nav();
});
```
这样就可以创建一个可定位的导航菜单了。当点击菜单项时,页面会平滑滚动到对应的部分。你也可以通过设置插件的各种选项来自定义导航菜单的外观和行为。