dcloud------mui 点击底部选项卡，获取文本内容

dcloud------mui 点击底部选项卡，获取文本内容

1.点击选项卡，触发的事件，我们用mui('.mui-bar-tab').on('tap', 'a', function(e) {   });

2.点击之后，采用 this  关键词，获取该对象，例如以下情况：

<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" >
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="message">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item"  id="phonenumber">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#" id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>

</a>
</nav>

this 就表示分别点击到：首页、消息、通讯录、设置这几个tab的a标签内的所有元素，要拿到文本的话，还要用到一个方法 querySelector，获取文本内容：this.querySelector('.mui-tab-label').innerHTML;

如果tab直接由a标签构成，例如以下情况：

<nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a>
<a class="mui-tab-item" href="#Popover_1">方案</a>
<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>

则文本内容获取方式：this.innerHTML;

ps：如果此时想要达到的目的是点击tab，修改header 的值，且nav和header是由两个页面构成，可以尝试一下方法

subpages（子） 页面

mui('.mui-bar-tab').on('tap', 'a', function(e) {
var ttile=this.querySelector('.mui-tab-label').innerHTML;
mui.fire(plus.webview.currentWebview().parent(), 'customevent',{ttext: ttile});
});

index（主） 页面

window.addEventListener('customevent',function(event){
  document.getElementById("title").innerHTML=event.detail.ttext;
}); 

到此：ok，就搞定了！如果有不明白的，关注并留言，一起探讨下！

如果大家感兴趣，或者想一起探讨学习的，请加一下这个QQ群， 488505459，谢谢！