简介

nav是一款轻量级的jQuery插件，用于在单页网站上导航。在单击导航时添加平滑滚动，并在滚动不同部分时自动选择正确的导航项。

（下载的附件中附有DEMO）

使用

1.  引入文件

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.nav.js"></script>

2.  HTML

<div class="head">导航</div>
    <div class="main">
        <ul id="nav">
            <li><a href="#a0">花卉详情</a></li>
            <li><a href="#a1">介绍</a></li>
            <li><a href="#a2">形态特征</a></li>
            <li><a href="#a3">生长习性</a></li>
            <li><a href="#a4">栽培技术</a></li>
            <li><a href="#a5">主要价值</a></li>
        </ul>
        <div class="box">
            <div id="a0" style="height: 300px;border:1px solid #ddd;">花卉详情</div>
            <div id="a1" style="height: 300px;border:1px solid #ddd;">介绍</div>
            <div id="a2" style="height: 300px;border:1px solid #ddd;">形态特征</div>
            <div id="a3" style="height: 300px;border:1px solid #ddd;">生长习性</div>
            <div id="a4" style="height: 300px;border:1px solid #ddd;">栽培技术</div>
            <div id="a5" style="height: 300px;border:1px solid #ddd;">主要价值</div>
        </div>
    </div>

CSS
<style type="text/css">
    * {
        margin: 0;
        padding: 0
    }
    
    li {
        list-style: none
    }
    a{text-decoration: none;}
    
    #nav {
        position: fixed;
        *left: 90px;
        top:100px;
    }
    
    #nav li {
        margin-bottom: 2px;
        width: 130px;
        height: 41px;
        line-height: 41px;
    }
    
    #nav a {
        background: #B18282;
        color: #fff;
        display: block;
        text-transform: uppercase;
        -ms-text-overflow: ellipsis;
        padding: 0 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    #nav a:hover {
        background: #00d420;
        color: #fff;
    }
    
    #nav .current a {
        background: #00d420;
        color: #fff;
    }
    .head{margin: 0 auto; width: 100%; height: 100px; line-height: 100px; background: #D49B6D; text-align: center; font-size: 30px;}
    .main{ width: 800px; margin: 0 auto; }
    .box{ width: 600px; border:1px solid #ddd; margin-left: 140px; }
    </style>

3.  调用

<script>
    $(function() {
        $('#nav').onePageNav();
    });
    </script>

相关链接

GitHub 地址 ：https://github.com/davist11/jQuery-One-Page-Nav