Question

我正在尝试创建一个脚本来实现标签功能，因为.tabs（）不是一个选项;它要求他们成为一个清单。它似乎工作一次，但再次单击div / tab不起作用。

$(document).ready(function() {

  var mt = $("#maintab");
  var at = $("#admintab");

  $("#tab-2").hide();  
  mt.css('background-color','#00FF00');
  mt.css('color','black');

  mt.mousedown(function() {
    $(this).css('background-color','#00FF00');
    $(this).css('color','black');
      at.css('background-color','black');
      at.css('color','#00FF00');
        $("#tab-2").hide();
        $("#tab-1").show();
  });

  at.mousedown(function() {
    $(this).css('background-color','#00FF00');
    $(this).css('color','black');
      mt.css('background-color','black');
      mt.css('color','#00FF00');
        $("#tab-1").hide();
        $("#tab-2").show();
  });

});

可能是什么问题？我已经链接到Markup中的最新jQuery和UI，以及检查id和类。一切都结束了。这是一个jsfiddle：http://jsfiddle.net/S7FLg/

Answer 1

问题是你正在使用重复的id，这是HTML中的 MUST NOT THING 之一。简而言之，id属性在整个文档中必须是唯一的。

所以要反驳你应该使用class而不是......

<p  class="taba maintab">Main</p>
<p  class="taba admintab">Admin</p>

您可以看到更新的Working Fiddle here

P.S

我在小提琴中使用了现有代码，并且没有更改id的{{1}}因为它扭曲了设计。而且，为什么要使用两个不同的标签块？ Admin和Main选项卡对于这两个div都是通用的。

Answer 2

如果您使用事件委派，则似乎不会出现问题：http://jsfiddle.net/S7FLg/3/

$(document).ready(function() {

  var mt = $("#maintab");
  var att = $("#admintab");

  $("#tab-2").hide();  
  mt.css('background-color','#00FF00');
  mt.css('color','black');

  $(document).on('mousedown','#maintab',function() {
    $(this).css('background-color','#00FF00');
    $(this).css('color','black');
      att.css('background-color','black');
      att.css('color','#00FF00');
        $("#tab-2").hide();
        $("#tab-1").show();
  });

  $(document).on('mousedown','#admintab',function() {
    $(this).css('background-color','#00FF00');
    $(this).css('color','black');
      mt.css('background-color','black');
      mt.css('color','#00FF00');
        $("#tab-1").hide();
        $("#tab-2").show();
  });

});

jQuery mousedown（）只运行一次

2 个答案:

您可以看到更新的Working Fiddle here