手机触屏TAB菜单

现在手机网页越来越多，我们可以先看下两个地址：“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，我写起来很不习惯啊，抱歉。。。

以下是我制作的效果截图：

以下我提供源文件，欢迎有需要的朋友下载使用：

预览地址：http://www.163css.com/hihilinxuan/cssjs/2012/11/navtouch/index.html

下载地址：手机触屏TAB菜单.zip