現在手機網頁越來越多，我們可以先看下兩個地址：http://3g.ifeng.com/”，“http://3g.163.com/touch”，我們都會發現有一個共同的特點，就是TAB菜單，對于這種相當傳統的特效，我們在之前做過許多，但在手機上，我們會發現它有新的生命力。
如果只是考慮上面的點擊，那就是TAB菜單了，只不過這個TAB菜單是全屏切換的，但如果你在手機上體驗，會發現，手滑動是可以實現切換，這個手勢在手機網頁上叫“swipe”，觸屏技術也促進了我們前端技術的發展。
細心的朋友，可能會注意到，當你切換的時候，下面的按鈕標題也會跟著變，而且URL也會跟著變，這樣，你切換后，點擊下面的按鈕就可以進入到相應的欄目了，網易的策劃者，這個地方值得夸獎啊。。。
那么，如何實現呢？
我們需要引進一個腳本，touchslider.js方便我們實現觸屏的功能，如果自己寫原生的腳本，估計就得一大堆了。。。
我這里，做了一個FOR循環，主要是為了解決ID方面的問題，讓用戶可以多個使用，為了實現那個標題及URL切換，我引進了zepto_min.js，這個代碼兼容JQUERY的寫法，就是小了點，適用于手機上，但好像少了HOVER那個方法啊，也許之所以小，就是因為刪掉了一些功能，畢竟，對于原生的JS，我寫起來很不習慣啊，抱歉。。。
以下是我制作的效果截圖：
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！