导航选中后标记的样式实现滑动效果

咳咳，当我们选中导航中的一项时，改选中项下方有一个明显的颜色，当我们选中其他的项时，该颜色滑动到新的选中项。

这个效果实现的原理就是：这个颜色是一个div层它与导航的选中项同属于一个大的div层，这里把他们的关系分为“兄弟”关系。

父div是相对定位position：relative；颜色div层的位置是绝对定位position：absolute；初始时让颜色div的位置定位left：0；bottom：0；（这个可根据需求来变）

                    <div class="tab">
                        <div class="tabss"><a href="javascript://">首页</a></div>

                        <div class="tabss"><a href="javascript://">新闻</a>   </div>

                        <div class="tabss"><a href="javascript://">图片</a>       </div>

                        <div class="tabss"><a href="javascript://">体育</a> </div>
                        <div class="liner"></div>
                    </div>

给她们添加上样式，这里简单给点样式

<style>
 .tab{ overflow:hidden;position:relative;636px; margin:87px auto 0;}
 .tab .tabss{float:left; 121px; height:34px; padding:0 5px 5px; text-align:center;  background-color:#000;}
 .tab .tabss a{ display:block; 121px; height:34px;  text-align:center; font:normal 20px/34px 微软雅黑; color:#fff;position:relative;z-index:100; }
 .tab .liner{ background-color:#ff0000;position:absolute;top:0px;left:0px; 131px; height:39px; }
</style>

下面就可以写方法了，这里我将方法封装了下，方便下次有类似情况调用

        slide(".tabss", ".liner");//调用方法

//方法开始
        function slide(checker, liner) {
            $(checker).mouseover(function () {
                var _index = $(this).index();//获取选中标签序号
                var _margin = parseInt($(this).css('margin-right'));//获取选中标签距离右边的距离;parseInt的作用是转换类型为int型
                var _length = $(liner).width();//获取下划线的长度
                $(checker).siblings(liner).stop(true, false).animate({ marginLeft: _index * (_length + _margin) }, 300);//实现下划线滑动
            })
        }
巴拉巴拉，这样就可以实现简单的滑动效果了。