我正在使用 Zurb Foundation 6 Tabs。我有一个 javascript 问题。这是我的 3 选项卡布局的 html。
<ul class="tabs" data-tabs id="myTabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1 Info</a></li>
<li class="tabs-title" ><a href="#panel2">Tab 2 Info</a></li>
<li class="tabs-title" ><a href="#panel3">Tab 3 Info</a></li>
</ul>
<div class="tabs-content" data-tabs-content="myTabs">
<div class="tabs-panel is-active" id="panel1">
....
</div>
<div class="tabs-panel" id="panel2">
....
</div>
<div class="tabs-panel" id="panel3">
....
</div>
</div>
选项卡效果很好!但是,我只想在单击时将内容加载到选项卡 3 中。我将使用 ajax 加载内容。 Foundation 6 文档提供了一个 javascript 事件,该事件在单击任何选项卡时触发。见下文:
$('#myTabs').on('change.zf.tabs', function() {
console.log('Those tabs sure did change!');
});
我需要一个仅在选择 panel3 时触发的事件。怎么办?
最佳答案
您可以在 'change.zf.tabs' 事件中使用条件,如下所示:
$('#myTabs').on('change.zf.tabs', function() {
if($('#panel3:visible').length){
console.log('Tab 3 is now visible!');
}
});
关于javascript - 在选定的选项卡上加载内容(基础),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34272941/