制表符之间的切换不适用于JQuery

Question

所以，我有一个简单的菜单，在haml，它是用来标签的。

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

})；

Answer 1

您可以使用反转ids和类来完成这一任务：

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

为单击函数添加了额外的类tab，因此脚本将非常短：

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

示例

Answer 2

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

切换时，您需要解除绑定/绑定单击事件

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

Answer 3

标签代码示例尝试如下-

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

});

请参考此小提琴。

参考文献