使用aui写一个tab切换

Question

想用aui框架写一个tab切换，但是遇到点问题。

html代码入下：

引入官方要求的aui-tab.js，使用文档介绍中的模板：

但是只有aui-tab-item进行了切换，tab里的内容并没有切换？

之前咨询过别人，说是tab里的内容，放在html位置没有要求。不知道现在我这样的结构对不对？还是我对文档的理解不对？迷茫中~~~~

如果对，为什么无法实现想要的效果呢？如果不对，那么应该怎么写合适呢？诚心请教，先谢谢啦~~~

补充：
有人给出了这样的写法，要结合api.js使用：

我暂时还是没有很理解这个。

Answer 1

$('.aui-tab-item').click(function(){
    var index1 = $(this).index();
    $(this).addClass('aui-active').siblings().removeClass('aui-active');

    $('.class-tab-ct .class-tab-ct-item').eq(index1).show().siblings().hide()
})

Answer 2

<script type="text/javascript">

        var tab = new auiTab({
            element: document.getElementById("tab"),
            index: 1,
            repeatClick: false
        }, function(ret) {
            console.log(ret.index);
                $('.class-tab-ct .class-tab-ct-item').addClass('aui-hide');
                $('.class-tab-ct .class-tab-ct-item').eq(ret.index-1).removeClass('aui-hide');
        });
    </script>