jQuery mousedown()只运行一次

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();
  });

});

有什么问题吗？我已经链接到标记中的最新jQuery和UI，以及检查id和类。一切都查清楚了。这里有个小摆设：http://jsfiddle.net/S7FLg/

Answer 1

问题是您正在使用重复的id，这是不能在中做的事情之一。简而言之，id属性在整个文档中必须是唯一的。

所以为了反驳你应该用class代替..。

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

你可以看到更新的在这里工作

P.S

我已经使用了现有的代码在小提琴，没有改变id的<p>，因为它扭曲了设计。为什么要使用两个不同的制表符块？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();
  });

});