自学在网上找到mui文档，为什么侧滑导航栏和选择卡同时用时，选择卡的内容会消失

<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-icon mui-icon-close mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-left">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</aside>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="offCanvas_switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
</ul>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
和
<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 id="item1" 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 id="item2" class="mui-slider-item mui-control-content"></div>
<!--第三个选项卡内容区，页面加载时为空-->
<div id="item3" class="mui-slider-item mui-control-content"></div>
</div>
</div>

js:

var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1&&!item2Show) {
//切换到第二个选项卡
//根据具体业务，动态获得第二个选项卡内容；
var content = ....
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位，下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 2&&!item3Show) {
//切换到第三个选项卡
//根据具体业务，动态获得第三个选项卡内容；
var content = ....
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位，下次直接显示
item3Show = true;
}
});