用的MUI组件中的带区域滚动的那个TAB选项卡组件，但是不能切换

mui框架会默认初始化当前页面的轮播组件；若轮播组件内容为js动态生成时（比如通过ajax动态获取），则需要在动态DOM生成后，就是你代码生成之后，再执行一次slider的初始化方法，重新获取动态添加的节点。代码没毛病，就是你动态生成的节点，需要重新获取，以下为例
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:0//自动轮播周期，若为0则不自动播放，默认为0；
});

能滚动，是说可以触摸左右滑动，不能切换，是指点击标题按钮不能切换界面，是这个情况吗？
给你一个结构，你自己研究一下代码摆放，滑块内容里，我这里是去掉了 区域滚动的，你可以自己加上去。
<div id="slider" class="mui-slider">
<!--标题导航：开始-->
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1"><em>标题按钮一</em></a>
<a class="mui-control-item" href="#item2">标题按钮二</a>
<a class="mui-control-item" href="#item3">标题按钮三</a>
</div>
<!--标题导航：结束-->
<!--标题导航高亮条：开始-->
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<!--标题导航高亮条：开始-->
<!--滑块容器：开始-->
<div class="mui-slider-group">
<!--滑块内容一：开始-->
<div id="item1" class="mui-slider-item mui-control-content mui-active">
你的标题一内容
</div>
<!--滑块内容一：结束-->
<!--滑块内容二：开始-->
<div id="item2" class="mui-slider-item mui-control-content">
你的标题二内容
</div>
<!--滑块内容二：结束-->
<!--滑块内容三：开始-->
<div id="item3" class="mui-slider-item mui-control-content">
你的标题三内容
</div>
<!--滑块内容三：结束-->
</div>
<!--滑块容器：结束-->
</div>

非常感谢您的回复。
表现出来的现象是上边的菜单部分可以横向滚动，也可以在点击时切换，

下面的列表部分可以纵向滚动，但是不能切换
我把DOT.JS生成的代码直接替换动态生成部分的代码，再进入页面就可以切换

所以我觉得很奇怪呀，为什么不能呢

这是打印出的生成部分代码

<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
            <div class="mui-scroll">  
                <a class="mui-control-item mui-active" href="#item1mobile"> 迟到 </a>  
                <a class="mui-control-item" href="#item2mobile"> 睡觉 </a>  
            </div>  
        </div>  
        <div class="mui-slider-group">  
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li class="mui-table-view-cell">2016-9-27:迟到a</li>  
                            <li class="mui-table-view-cell">2016-9-27:迟到b</li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
            <div id="item2mobile" class="mui-slider-item mui-control-content">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li class="mui-table-view-cell">2016-9-27:睡觉a</li>  
                            <li class="mui-table-view-cell">2016-9-27:睡觉b</li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>

加上头和尾
我觉得没毛病呀
<div class="mui-content">

        <div id="slider" class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div class="mui-scroll">  
                    <a class="mui-control-item mui-active" href="#item1mobile"> 迟到 </a>  
                    <a class="mui-control-item" href="#item2mobile"> 睡觉 </a>  
                </div>  
            </div>  
            <div class="mui-slider-group">  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view">  
                                <li class="mui-table-view-cell">2016-9-27:迟到a</li>  
                                <li class="mui-table-view-cell">2016-9-27:迟到b</li>  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view">  
                                <li class="mui-table-view-cell">2016-9-27:睡觉a</li>  
                                <li class="mui-table-view-cell">2016-9-27:睡觉b</li>  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  

    </div>  

正常的如头两个图片，点击睡觉切到睡觉列表，点迟到切迟到列表
动态生成的菜单和列表就下面那样了，点了不切换