我正在使用 jquery ui 选项卡,想知道当您单击事件选项卡(或任何选项卡)时是否有事件。
我已经尝试了 activate
和 beforeActive
但这些似乎只有在点击非事件选项卡时才会触发(请参阅以下代码)
$("#tabs").tabs({
beforeActivate: function(event, ui) {
console.log('beforeActivate')
},
activate: function(event, ui) {
console.log('activate')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="tabs" class="ui-layout-center">
<ul>
<li>
<a href="#tab-1">Tab #1</a>
</li>
<li>
<a href="#tab-2">Tab #1</a>
</li>
</ul>
<div id="tab-container">
<div id="tab-1">
tab 1!
</div>
<div id="tab-2">
tab 2!
</div>
</div>
</div>
我试图做的是在单击事件 li 时在 ul 上切换一个类。这可以使用选项卡额外事件来完成吗,因为我试图不在 ui 方法之外添加单独的点击事件
最佳答案
试试这个:
$("#tabs")
.tabs()
.on("click", '[role="tab"]', function() {
$(this).closest("ul") // The current UL
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="tabs" class="ui-layout-center">
<ul>
<li>
<a href="#tab-1">Tab #1</a>
</li>
<li>
<a href="#tab-2">Tab #1</a>
</li>
</ul>
<div id="tab-container">
<div id="tab-1">
tab 1!
</div>
<div id="tab-2">
tab 2!
</div>
</div>
</div>
关于javascript - Tabs 事件点击事件标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39249079/