<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
margin: 0px;
padding: 0;
}
.tab{
width: 500px;
margin: 50px auto 0;
}
.tit{
list-style: none;
overflow: hidden;
}
.tit li{
list-style: none;
float: left;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
background-color: #0a66bd;
color: #fff;
margin-right: 5px;
}
.tit li:hover{
cursor:pointer;
}
.tit li.current{
background-color: #00b7ee;
}
.con{
border: 1px solid #00b7ee;
}
</style>
</head>
<script src="../js/avalon2.2.js"></script>
<script>
var vm = avalon.define({
$id: 'tabs',
tit:['fir','sec','third'],
con:['firCon','secCon','thirdCon'],
tabCon:[
{
tit:'fir',
con:'firCon',
cls:'current'
},
{
tit:'sec',
con:'secCon',
cls:''
},
{
tit:'third',
con:'thirdCon',
cls:''
}
],
con: 'firCon',
cls:'current',
titClick2: function (i) {
vm.con = vm.tabCon[this.key].con;
avalon.each(vm.tabCon,function (index, el) {
el.cls = ''
});
vm.tabCon[this.key].cls = 'current';
}
});
</script>
<body>
<div ms-controller="tabs" class="tab">
<ul class="tit">
<li ms-for="{key,val} in @tabCon" ms-click="titClick2" ms-class="val.cls" >{{val.tit}}</li>
</ul>
<div class="con">
{{@con}}
</div>
</div>
</body>
</html>
tab
最新推荐文章于 2024-08-01 14:15:36 发布