slide demo优化问题

http://dcloudio.github.io/mui/javascript/#slide
在slide demo当切换到第二、第三个选项卡时，再动态获取相应内容进行显示的示例脚本中以id加变量来作判断，我都醉了。如果我有N多个选项卡，那这脚本得写多长？
建议使用元素属性完成这种任务，脚本也简单：
<div class="mui-slider">
<!--选项卡标题区-->
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">待办公文</a>
<a class="mui-control-item" href="#item2">已办公文</a>
<a class="mui-control-item" href="#item3">全部公文</a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<!--第一个选项卡内容区-->
<div class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">待办公文1</li>
<li class="mui-table-view-cell">待办公文2</li>
<li class="mui-table-view-cell">待办公文3</li>
</ul>
</div>
<!--第二个选项卡内容区，页面加载时为空-->
<div data-url="item2" class="mui-slider-item mui-control-content"></div>
<!--第三个选项卡内容区，页面加载时为空-->
<div data-url="item3" class="mui-slider-item mui-control-content"></div>
</div>
</div>
<script type="text/javascript">
var divContent = document.querySelectorAll(".mui-control-content");//获取所有选项卡内容区
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
var i = event.detail.slideNumber,obj = divContent[i],url = obj.getAttribute("data-url");
if(url){
obj.removeAttribute("data-url"); //移除属性，以防二次加载
//根据url执行 ajax 加载
divContent[i].innerHTML = i + "加载中……"; //得到内容赋值content
}
});
</script>