使用jQuery实现网页定位导航

如今网上购物对人们来说已经是家常便饭了，越来越多的网上商城也更注重用户体验，这篇文章就以天猫这样的购物商城为例子，教你如何编写代码实现网页定位导航。由于博主资质尚浅，所以只能分享我学习的一点基础，大家多多提出建议！
首先就是要实现表现和形式的分离，我们根据导航的样式设计一个导航菜单和每个部分导航条对应的商品展示，这里我只简单利用几张相同的图片来实现效果。

1.导航条的设计
这里采用class=”current”表示默认初始状态1F是选中状态，会显示高亮。此处涉及到锚点的使用，可以迅速定位到相应位置。
<li><a href="#item1" class="current">1F</a></li>

<div id="menu">
            <ul>
                <li><a href="#item1" class="current">1F</a></li>
                <li><a href="#item2">2F</a></li>
                <li><a href="#item3">3F</a></li>
                <li><a href="#item4">4F</a></li>
                <li><a href="#item5">5F</a></li>
            </ul>
        </div>

2.不同购物楼层产品的展示，只要写了一个部分，剩下的都是类似的原理。所有的楼层都用了同样的class样式，方便CSS样式的实现。

<div id="item1" class="item">

这里使用id=”item1”而不是name=”item1”,因为HTML5取消了name的使用，统一使用id进行锚点链接的设置。

        <div id="content">
            <h1>定位导航的使用</h1>
            <div id="item1" class="item">
                <h2>1F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20160716225549981" alt=""/>