我在MVC应用程序中使用jquery标签。基于选项卡被选中,我不会收到消息并取消所选选项卡的显示事件。
是否可以取消jquery标签的“显示”事件?
代码:
$tabs = $("#resultTabs").tabs();
var selectedTab = $tabs.tabs('option', 'selected');
$tabs.tabs("select", (selectedTab));
$tabs.tabs({
select: function (e) {
if (selectedTab != 4 && GetQuickViewValidation()) {
e.stopPropagation();
return;
}
},
show: function (event, ui) {
LoadResultTab(true, false);
}
});
答案 0 :(得分:1)
要求
- 您要阻止显示“呼叫”标签
解决方案:
- 您需要为标签使用
beforeActivate: function(event, ui)
事件- 您将能够在此处访问点击了
event
的- 使用
event.preventDefault();
停止制表符更改事件
请检查以下代码:
$('#tabs').tabs({
beforeActivate: function(event, ui) {
if (confirm('Do you want to tab switch?')==false) {
event.preventDefault(); // prevent switching tabs
}
}
});
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>You are wathing <b>tab 1</b> here.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="tabs-2">
<p>You are wathing <b>tab 2</b> here.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div id="tabs-3">
<p>You are wathing <b>tab 3</b> here.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
在这里,只有接受OK
才能切换标签。