jQuery 导航栏功能实现（高亮/相应菜单映射内容/无延迟二级菜单）

引入：导航栏的功能繁多，选取了几个常用的效果做个练手。

（忽然发现jQuery真的巨好用。。。对于新手的我，造轮子什么的，相当痛苦。我还有救么。。）

好了，总结完睡觉去了。
很多废话，看实现方法和代码就好了

功能1：鼠标滑过菜单高亮显示

实现方法：CSS ：hover伪类
一般来说，用户只是在选择进入某一菜单时（未点击）会用到此功能。所以实现起来简单。

功能2：鼠标点击后，菜单保持高亮并跳转到相应内容

实现方法：
针对跳转到相应内容：这里用的是锚点定位（使用该方法时当页面的URL发生变化时，可能导致无法成功定位；改天再总结下定位方法）。
针对高亮效果： click事件+addClass（恩此类方法总是那么简单粗暴）

功能3：当屏幕滚动时，可视区域内容对应的菜单呈高亮状态

实现方法： 利用scrollTop（屏幕滚动）和可视区域显示元素的offsetTop比较，对相应菜单进行添加类名（预设样式）。

关键：我是用循环的方式添加的类名，各位大佬有没有更好的方法？（这个是不是可以用事件委托做啊，但是我试了半天bind（‘scroll’），么有反应。）

scroll事件：jQuery文档描述的是，滚动条发生变化时触发，目前我试了下，就在window/document绑定是有效的。网上还有的说，对overflow值为auto/scroll的元素也有效。真的有效，恩！

附上代码：

<!--No.1 主菜单，无子菜单; 功能：1.鼠标滑过高亮:CSS实现 2.点亮保持 onclick 3.对应内容显示-->
    <nav id="nav">
        <ul>
            <li data-id="0" class="active"><a href="#0">item1</a></li>
            <li data-id="1"><a href="#1">item2</a></li>
            <li data-id="2"><a href="#2">item3</a></li>
            <li data-id="3"><a href="#3">item4</a></li>
            <li data-id="4"><a href="#4">item5</a></li>
        </ul>
    </nav>
    <main id="main-content">
        <section id="0">
            <h3>第一段</h3>
            <p>这是一个段落段落段落段落</p>
            <p>这是一个段落段落段落段落</p>
        </section>
        <section id="1">
            <h3>第二段</h3>
            <p>这是一个段落段落段落段落</p>
            <p>这是一个段落段落段落段落</p>
        </section>
        <section id="2">
            <h3>第三段</h3>
            <p>这是一个段落段落段落段落</p>