记录我的解决方案,因为我在其他地方找不到这种方法。
这是部分/选项卡定义html
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title><a href="#p1">Section 1</a></p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#p2">Section 2</a></p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
以下代码用于添加用于选项卡选择的 javascript 事件处理程序
script>
$(document).foundation();
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a[href='#p1']").bind("click", function(){
alert(" panel 1"); //panel 1 is about to be opened by user
});
$("a[href='#p2']").bind("click", function(){
alert(" panel 2"); // panel 2 is about to be opened
});
});
另请注意,标签面板或部分可以通过您的 javascript 传递点击事件来打开,如下所示:
$("a[href='#p2']").click(); // this open tab p2
注意问题:第一次加载页面时,默认情况下会显示第一个选项卡,并且不会调用第一个选项卡的处理程序;如果您计划为选项卡 1(本示例中的面板 1)加载 ajax 数据,则不能这样做。