tab

最新推荐文章于 2024-08-01 14:15:36 发布

hongc93

最新推荐文章于 2024-08-01 14:15:36 发布

阅读量262

点赞数

分类专栏： avalon 文章标签： tab-avalon

本文链接：https://blog.csdn.net/hongc93/article/details/54575333

版权

avalon 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

hongc93

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style> *{ font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragin
复制链接

扫一扫