选项卡之间的切换不适用于 JQuery答案

【问题标题】：Switching between tabs does not work with JQuery选项卡之间的切换不适用于 JQuery
【发布时间】：2014-06-11 10:45:43
【问题描述】：

所以我在 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()
        }
    });

});

【问题讨论】：

标签： jquery tabs haml

【解决方案1】：

您可以使用反转 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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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');
        }
   });

});

请参阅此FIDDLE。

Reference

【讨论】：

【解决方案4】：

你不需要将id从selected更改为notselected，只需使用class更改它并尝试这样

<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

【讨论】：