javascript - avalon 选项卡切换问题，该怎么解决？
本文介绍了javascript - 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>
解决方案
http://avalonjs.coding.me/cn/examples.html 这里有一个切换卡，基于avalon2
这篇关于javascript - avalon 选项卡切换问题，该怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
