Question

我正在尝试阻止默认的一个标签。

这是标签：

<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" 
 aria-controls="Preferences" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
 <a href="#Preferences" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">Preferences</a></li>

这是我的JavaScript。

$( "#tabs" ).tabs();
$('#ui-id-2').click(function(event) {
     event.preventDefault();
});

链接事件侦听器有效，但不会阻止该事件。有什么办法可以防止一个选项卡上的默认行为？

Answer 1

我想您想做的是阻止“首选项”选项卡可以打开。因此，您可以使用属性“ disabled”将该属性的值默认设置为false，可以将所有选项卡的禁用状态设置为true或设置一个数组来指示已禁用的索引选项卡

$( ".selector" ).tabs (
   { disabled: [ 2 ] }
);

以上代码禁用了第三个标签请记住，在这些情况下，您不能使用preventDefault（）函数，因为它不是组件的默认行为

Answer 2

您可以通过event.preventDefault()或return false阻止默认行为，两种方法均有效。例如，这里我创建了3个链接，除了id和处理事件外，它们完全相同：

普通链接
通过event.preventDefault()阻止默认行为
通过return false阻止默认行为

$('#ui-id-2').click(function(event) {
   event.preventDefault();
});

$('#ui-id-3').click(function(event) {
   return false;
});

li {
  width: 300px;
  background-color: royalblue;
  margin-top: 16px;
}

a {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" 
 aria-controls="Preferences" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
 <a href="https://www.google.ru/?hl=en" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Preferences</a></li>

<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" 
 aria-controls="Preferences" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
 <a href="https://www.google.ru/?hl=en" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">Preferences</a></li>
 
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" 
 aria-controls="Preferences" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
 <a href="https://www.google.ru/?hl=en" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-3">Preferences</a></li>

jQuery选项卡preventDefailt一个特定的选项卡

2 个答案: