Question

我有一个标签系统设置，使用以下结构自动检测新标签：

<a href="#div1id">Show div 1</a>
<div id="div1id">Div1</div>

问题是，我需要通过单击已显示的选项卡来禁用重新加载选项卡的功能。我尝试使用.hasClass（）和.is（）来检测点击的标签是否已经应用了“.active”，但没有运气。

这是我当前的动画和更改代码：

$(document).ready(function(){
 $("#tabs li").click(function() {
  $("#tabs li").removeClass('active');
  $(this).addClass("active");
  $(".content").hide();
  var selected_tab = $(this).find("a").attr("href");
  $(selected_tab).fadeIn();
 });
});

Answer 1

可能只是简单地覆盖了click事件

$(".active").click(function(){
      return false;
});

Answer 2

您可以使用.delegate()来提高效率并解决问题，例如：

$(function(){
  $("#tabs").delegate("li:not(.active)", "click", function() {
    $("#tabs li").removeClass('active');
    $(this).addClass("active");
    $(".content").hide();
    $($(this).find("a").attr("href")).fadeIn();
  });
});

在选择器中使用:not(.active)，click处理程序只有在:not()具有.active类时才会执行...而且您只有一个事件处理程序n个事件处理程序，每个<li>一个。

Answer 3

应该没有理由说明以下情况不起作用。

$(document).ready(function(){
    $("#tabs li").click(function() {
        if (!$(this).hasClass('active')) {
            $("#tabs li.active").hide();
            $("#tabs li.active").removeClass('active');
            $(this).addClass("active");
            $("#tabs li.active").fadeIn();
        }
    });
});

jQuery：仅当selected元素具有类时才运行命令

3 个答案: