Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大，不管哪种方法，必须要使用javascript调用。
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：
在开发者工具中预览效果
我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。
css3实现：
先看最基本的.wxml布局：
从图中可以看到，当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢？就是红圈部分，用translateX位移来移动，而transitions实现一个过渡效果。
curtab就是当前点击tab的index，点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足，就是tab的宽度是固定的，但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现：
有些喜欢折腾的同学说想要js来实现呢？当然也是可以的，用js来实现的思路也是一样，用控制line元素的translateX值。那么怎么知道应为位移多少呢？就是动态的去获取该位移的值，然后赋给translateX。
说到动态的去获取元素额left值，可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。（这里不细说api的用户，不清楚的同学请自行查看文档哈哈哈）
那是不是可以:
来看看具体的实现：
emmm最后说一下，前端时间看到过一个很骚的操作，同样是用纯css实现这种跟随动画，先看看效果图：
.css
一开始我也以为纯用css做点击是做不到，搜了下资料，看到了一个demo，主要逻辑就是通过锚点进行定位，在指定区域显示不同的模块。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>纯CSS实现tab选项卡</title>
<style>
body,div,ul,li{margin:0 padding:0 font-size:12px}
.clearFloat{ clear:both height:0 line-height:0 font-size:0}
.tab_ul{ margin:10px auto 0 padding-left:20px width:228px height:31px background:url(/uploads/allimg/100309/1_100309143554_1.gif) left bottom repeat-x #FCEDFFborder:1px solid #DBA4E8 border-bottom:0}
.tab_ul li{ float:left display:inline margin:5px 0 0 5px width:46px height:26px}
.tab_ul li a{ display:blockwidth:46px height:26px line-height:26px text-align:centerfont-size:12px color:#000000 text-decoration:none}
.tab_ul li a:hover{ background-image:url(/uploads/allimg/100309/1_100309143512_1.gif) color:#5F0082 font-weight:bold}
.tabDiv{ margin:0 auto width:248px height:200pxborder:1px solid #DBA4E8 border-top:0 overflow:hidden}
.tabDiv ul{ margin:0 auto 0 padding-top:10px width:218px height:190px}
.tabDiv ul li{ height:24px text-align:right color:#666666 font-size:12px}
.tabDiv ul li a{ float:left color:#333333}
</style>
</head>
<body>
<!--tab-->
<ul class="tab_ul">
<li><a href="#ul1">美食</a></li>
<li><a href="#ul2">娱乐</a></li>
<li><a href="#ul3">购物</a></li>
<li><a href="#ul4">住宿</a></li>
</ul>
<div class="tabDiv">
<ul id="ul1">
<li><a href="#" _fcksavedurl="#">·国际饭店星光旋转餐厅1</a>0.1公里</li>
</ul>
<ul id="ul2">
<li><a href="#" _fcksavedurl="#">·更多刮大风长安店)2</a>0.2公里</li>
</ul>
<ul id="ul3">
<li><a href="#" _fcksavedurl="#">·渝信发是店)3</a>0.3公里</li>
</ul>
<ul id="ul4">
<li><a href="#" _fcksavedurl="#">·国际饭防盗锁旋转餐厅4</a>0.4公里</li>
</ul>
</div>
<!--tab结束-->
</body>
</html>
