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>
<!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 runat="server"> <title>使用JavaScript实现的tab</title> <style type="text/css"> /*设置超链接样式*/a{color: #5086a5 text-decoration: none font-size: 12px}a:hover{ color: #5086a5 text-decoration: underline font-size: 12px}a:visited{color: #5086a5 font-size: 12px }/*整个tab层居中，宽度为600px*/#tabDiv{width:600px margin:1em auto padding-bottom: 10px border-right: #b2c9d3 1px solid border-top: #b2c9d3 1px solid border-left: #b2c9d3 1px solid border-bottom: #b2c9d3 1px solid background: #ffffff}/*tab头的样式*/#tabsHead{ padding-left: 0pxheight: 26pxbackground-color: #e8f7fcfont-size: 1emmargin: 1px 0px 0pxcolor: #5086a5line-height: 26px}/*已选tab头（超链接）的样式*/.curtab{padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px border-right: #b2c9d3 1px solid font-weight: bold float: left cursor: pointer background: #ffffff } /*未选tab头（超链接）的样式*/.tabs{border-right: #c1d8e0 1px solid padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px font-weight: normal float: left cursor: pointer }p{font-size:9pt margin-left:20pt }</style> <script language="javascript" type="text/jscript"> <!--//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）function showTab(tabHeadId,tabContentId){//tab层var tabDiv = document.getElementById("tabDiv") //将tab层中所有的内容层设为不可见//遍历tab层下的所有子节点var taContents = tabDiv.childNodes for(i=0i<taContents.lengthi++){//将所有内容层都设为不可见if(taContents[i].id!=null &&taContents[i].id != 'tabsHead'){taContents[i].style.display = 'none' }}//将要显示的层设为可见document.getElementById(tabContentId).style.display = 'block' //遍历tab头中所有的超链接var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a') for(i=0i<tabHeads.lengthi++){//将超链接的样式设为未选的tab头样式tabHeads[i].className='tabs' }//将当前超链接的样式设为已选tab头样式document.getElementById(tabHeadId).className='curtab' document.getElementById(tabHeadId).blur() }--> </script></head><body> <form id="form1" runat="server"> <!--tab控件--> <div id="tabDiv"><!--tab头--><div id="tabsHead"><a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a><a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a></div><div id="tabContent1" style="display:block">很多时候在做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
