选项卡之间切换功能不起作用与jQuery

所以我在这HAML简单的菜单，是为了被标签选项卡之间切换功能不起作用与jQuery

.monthly_tab#selected 
     Monthly 
    .yearly_tab#notselected 
     Yearly

这是jQuery代码标签之间切换。它不能完全正确地工作。我可以从.monthly_tab切换到.yearly_tab，但不能返回。

$(document).ready(function() { 
    $("#notselected").click(function(){ 
     if ($("#notselected").hasClass("yearly_tab")){ 
      $(".yearly_tab#notselected").removeAttr("id") 
      $(".yearly_tab").attr("id", "selected") 
      $(".monthly_tab#selected").removeAttr("id") 
      $(".monthly_tab").attr("id", "notselected") 
      $(".prices.monthly").hide() 
      $(".prices.yearly").show() 
     }else if ($("#notselected").hasClass("monthly_tab")){ 
      $(".monthly_tab#notselected").removeAttr("id") 
      $(".monthly_tab").attr("id", "selected") 
      $(".yearly_tab#selected").removeAttr("id") 
      $(".yearly_tab").attr("id", "notselected") 
      $(".prices.yearly").hide() 
      $(".prices.monthly").show() 
     } 
    });

}）;对于标签

来源

2014-06-11 Helena

您可以反转ID和班级做到这一点：

#monthly_tab.selected.tab 
    Monthly 
#yearly_tab.notselected.tab 
    Yearly

额外类tab增加了点击功能，所以脚本将是非常短：

$(".tab").click(function() { 
    $(".selected").addClass("notselected").removeClass("selected"); 
    $(this).removeClass("notselected").addClass("selected"); 
});

EXAMPLE

来源

2014-06-11 11:06:52 raskalbass

示例代码尝试像这个 -

$(document).ready(function() {  

    $('#tabs li a:not(:first)').addClass('inactive'); 
    $('.container').hide(); 
    $('.container:first').show(); 

    $('#tabs li a').click(function(){ 
     var t = $(this).attr('id'); 
     if($(this).hasClass('inactive')){ 
      $('#tabs li a').addClass('inactive');   
      $(this).removeClass('inactive'); 

      $('.container').hide(); 
      $('#'+ t + 'C').fadeIn('slow'); 
     } 
    }); 

});

转寄此FIDDLE。

Reference

来源

2014-06-11 11:01:42 Suhas

The单击事件仅绑定到匹配“#notselected”的元素一次 - 它不会自动绑定到与该id匹配的任何新元素。

Insteand你需要取消绑定/绑定click事件在

function rebind() { 
    $("#notselected").unbind('click').click(handle); 
} 

function handle() { 

    if ($("#notselected").hasClass("yearly_tab")){ 

     $(".yearly_tab#notselected").removeAttr("id") 
     $(".yearly_tab").attr("id", "selected") 
     $(".monthly_tab#selected").removeAttr("id") 
     $(".monthly_tab").attr("id", "notselected") 
     $(".prices.monthly").hide() 
     $(".prices.yearly").show() 

    } else if ($("#notselected").hasClass("monthly_tab")){ 

     $(".monthly_tab#notselected").removeAttr("id") 
     $(".monthly_tab").attr("id", "selected") 
     $(".yearly_tab#selected").removeAttr("id") 
     $(".yearly_tab").attr("id", "notselected"); 
     $(".prices.yearly").hide() 
     $(".prices.monthly").show() 

    } 

    rebind(); 
} 

$(document).ready(function() { 
    $("#notselected").unbind('click').click(handle); 
});

来源

2014-06-11 11:09:45

切换时不需要改变从选择notselected的ID，只需用类改变它，尝试这样

<span class="tab monthly_tab selected">monthly</span> 
<span class="tab yearly_tab">yearly</span> 
$(document).ready(function() { 
    $(".tab").click(function(){ 
     if (!$(this).hasClass("selected")){ 
      if ($(this).hasClass("monthly_tab")){ 
       alert('hide yearly') 
       alert('show monthly') 
       $(".yearly_tab").removeClass("selected") 
      } 
      else if ($(this).hasClass("yearly_tab")){ 
       alert('hide monthly') 
       alert('show yearly') 
       $(".monthly_tab").removeClass("selected") 
      } 
      $(this).addClass("selected") 
     } 
    }); 
});

JSFIDDLE

来源

2014-06-11 11:09:49 Kyojimaru

选项卡之间切换功能不起作用与jQuery

回答

相关问题