【问题标题】:jQuery tab losing focusjQuery选项卡失去焦点
【发布时间】:2011-07-22 22:22:34
【问题描述】:

我正在使用以下 jQuery 代码在页面上的选项卡之间切换:

jQuery(document).ready(function(){
    jQuery('#questions > div').hide();
    jQuery('#questions  div:first').show();
    jQuery('#questions  ul li:first').addClass('active');

    jQuery('#questions  ul li a').click(function(){
        jQuery('#questions  ul li').removeClass('active');
        jQuery('#questions  ul li').removeClass('selected');
        jQuery(this).parent().addClass('active');
        jQuery(this).parent().addClass('selected');
        var currentTab = jQuery(this).attr('href');
        jQuery('#questions > div').hide();
        jQuery(currentTab).show();
        return false;
    });
});

现在问题在于我有一个删除行调用的选项卡之一:

<div id ="questions">
  <ul>
    <li class="selected"><a href="#tab-1"></a></li>
    <li><a href="#tab-2"></a></li>
  </ul>
  <div id ="tab-1">
    <ul>
       <li class="links delete">
         <a href="#" onclick="deleteQuestion(<?php print($question_row; ?>); return false;"  
                  class="links">Delete</a> 
       </li>
    </ul>
  </div>
 </div>

现在,当用户尝试删除链接选项卡时,它会失去焦点,并且选项卡下不会显示任何内容。 有没有办法解决这个问题?

【问题讨论】:

  • 当你打电话给jQuery(currentTab).show()时你到底想做什么?
  • 看看这段代码在做什么。首先选择 Tab-1。当用户点击 Tab-2 时,它会将焦点转移到那个。

标签: php jquery


【解决方案1】:

试试这个

 jQuery(document).ready(function(){
        jQuery('#questions > div').hide();
        jQuery('#questions > div:first').show();
        jQuery('#questions > ul li:first').addClass('active');

        jQuery('#questions > ul > li > a').click(function(){
            jQuery('#questions > ul > li').removeClass('active');
            jQuery('#questions > ul > li').removeClass('selected');
            jQuery(this).parent().addClass('active');
            jQuery(this).parent().addClass('selected');
            var currentTab = jQuery(this).attr('href');
            jQuery('#questions > div').hide();
            jQuery(currentTab).show();
            return false;
        });
    });

【讨论】:

  • 它不工作。我想我忘了添加标签链接,所以你没有得到正确的代码。你能再看看吗?