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

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

Answer 2

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

Insteand你需要在切换时取消绑定/绑定点击事件

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

});

请参阅此FIDDLE。

Reference

Answer 4

您无需将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

在标签之间切换不适用于JQuery

4 个答案: