<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
ul{
list-style: none
}
*{
margin: 0
padding: 0
}
#tab{
border: 1px solid #ccc
margin: 20px auto
width: 403px
border-top: none
}
.list ul{
overflow: hidden
}
.list li{
float: left
}
.list li{
padding-left: 28px
padding-right: 28px
padding-top: 6px
padding-bottom: 6px
border: 1px solid #ccc
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED)
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))
border-right: none
cursor: pointer
}
#listCon{
height: 100px
}
#listCon div{
padding:10px
position:absolute
opacity:0
filter:alpha(opacity=0)
}
.list li:first-child{
border-left: none
}
.list li:hover{
background: #fff
border-bottom: none
}
.list li.cur{
background: #fff
border-bottom: none
}
#listCon div.cur{
opacity:1
filter:alpha(opacity=100)
}
</style>
</head>
<body>
<div id="tab">
<div>
<ul>
<li>许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div>断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("tab")
var lis = oDiv.getElementsByTagName("li")
var oDivCon = document.getElementById("listCon")
var lisDiv = oDivCon.getElementsByTagName("div")
for(var i=0i<lis.lengthi++){
lis[i].index = i
lis[i].onmouseover = function(){
show(this.index)
}
}
function show(a){
for(var j=0j<lis.lengthj++){
lis[j].className = ""
lisDiv[j].className = ""
}
lis[a].className = "cur"
lisDiv[a].className = "cur"
}
}
</script>
</body>
</html>
微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。 下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示： 在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。 把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。 通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。 注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。 逻辑层添加了active数据控制当前显示盒子。 wxml要书写判断验证去控制盒子是否有cur类名。 上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。 有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。 首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。 给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。 把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。 e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。楼主 你的代码不全 我给你重新写一个吧
<!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>
<title>tab页切换</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<script type="text/javascript">
function switchTab(ProTag, ProBox) {
for (i = 1 i < 5 i++) {
if ("tab" + i == ProTag) {
document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on"
} else {
document.getElementById("tab" + i).getElementsByTagName("a")[0].className = ""
}
if ("con" + i == ProBox) {
document.getElementById(ProBox).style.display = ""
} else {
document.getElementById("con" + i).style.display = "none"
}
}
}
</script>
<style type="text/css">
*
{
padding: 0
margin: 0
line-height: 25px
font-size: 12px
list-style:none
}
#tabContainer
{
margin: 30px
}
#tabContainer li
{
float: left
width: 80px
margin: 0 3px
background: #efefef
text-align: center
}
#tabContainer a
{
display: block
}
#tabContainer a.on
{
background: pink
}
</style>
</head>
<body>
<div id="tabContainer">
<ul>
<li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1')this.blur()return false">
命运</a></li>
<li id="tab2"><a href="#" onclick="switchTab('tab2','con2')this.blur()return false">
运势</a></li>
<li id="tab3"><a href="#" onclick="switchTab('tab3','con3')this.blur()return false">
缘分</a></li>
<li id="tab4"><a href="#" onclick="switchTab('tab4','con4')this.blur()return false">
人生</a></li>
</ul>
<div style="clear: both">
</div>
<div id="con1">
命运是个神马玩意儿...
</div>
<div id="con2" style="display: none">
霉运也是一种运气...
</div>
<div id="con3" style="display: none">
缘份纯粹是蒙人的东西...
</div>
<div id="con4" style="display: none">
人生就是人"生"出来之后的过程...
</div>
</div>
</body>
</html>
