avalon 选项卡切换问题,该怎么解决?

新手上路,请多包涵

最近在看avalonJS,看到http://www.cnblogs.com/vajoy/p/4063824.html 这篇文章,对于最后面的例子很是疑惑。在这个代码的基础上应该怎样解决问题?
希望用过avalon的朋友解答一下,谢谢!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/avalon.js"></script>
</head>
<body>
    <script type="text/javascript">
      var gg=[
          {"id":"1","title":"公告文章标题1"},
          {"id":"2","title":"公告文章标题2"},
          {"id":"3","title":"公告文章标题3"},
          {"id":"4","title":"公告文章标题4"}];
      var bd=[
          {"id":"1","title":"媒体报道文章标题1"},
          {"id":"2","title":"媒体报道文章标题2"},
          {"id":"3","title":"媒体报道文章标题3"},
          {"id":"4","title":"媒体报道文章标题4"}];
    </script>
    <div ms-controller="list">
        <span ms-mouseover="changeUl(1)">公告</span>
        <span ms-mouseover="changeUl(0)">媒体报道</span>
        <a ms-attr-href="'#!/'+ more_name">{{more_text}}</a>
        <ul>
            <li ms-repeat="infoList">
                  <a ms-attr-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = avalon.define({
            $id: "list",
            more_name: "gg",
            more_text: "更多公告",
            gg:gg,
            bd:bd,
            infoList:gg,
            changeUl:function(flag){
                console.table(gg)
                if(flag){  //鼠标移过“公告”选项卡头部
                    vm.more_name = "gg";
                    vm.more_text = "更多公告";
                    vm.infoList = vm.gg;
                }else{  //鼠标移过“媒体报道”选项卡头部
                    vm.more_name = "bd";
                    vm.more_text = "更多报道";
                    vm.infoList = vm.bd;
                }
            }
        });
          avalon.scan();
    </script>
</body>
</html>
阅读 3.4k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题