咳咳，當我們選中導航中的一項時，改選中項下方有一個明顯的顏色，當我們選中其他的項時，該顏色滑動到新的選中項。

這個效果實現(xiàn)的原理就是：這個顏色是一個div層它與導航的選中項同屬于一個大的div層，這里把他們的關(guān)系分為“兄弟”關(guān)系。

父div是相對定位position：relative；顏色div層的位置是絕對定位position：absolute；初始時讓顏色div的位置定位left：0；bottom：0；（這個可根據(jù)需求來變）

??????????????????? <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;width:636px; margin:87px auto 0;}
?.tab .tabss{float:left; width:121px; height:34px; padding:0 5px 5px; text-align:center;? background-color:#000;}
?.tab .tabss a{ display:block; width: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; width:131px; height:39px; }
</style>

下面就可以寫方法了，這里我將方法封裝了下，方便下次有類似情況調(diào)用

??????? slide(".tabss", ".liner");//調(diào)用方法

?

//方法開始
??????? function slide(checker, liner) {
??????????? $(checker).mouseover(function () {
??????????????? var _index = $(this).index();//獲取選中標簽序號
??????????????? var _margin = parseInt($(this).css('margin-right'));//獲取選中標簽距離右邊的距離;parseInt的作用是轉(zhuǎn)換類型為int型
??????????????? var _length = $(liner).width();//獲取下劃線的長度
??????????????? $(checker).siblings(liner).stop(true, false).animate({ marginLeft: _index * (_length + _margin) }, 300);//實現(xiàn)下劃線滑動
??????????? })
??????? }
巴拉巴拉，這樣就可以實現(xiàn)簡單的滑動效果了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/tl2f/p/5016300.html

總結(jié)

以上是生活随笔為你收集整理的导航选中后标记的样式实现滑动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。