Switching between tabs does not work with JQuery

Question

So I have this simple menu in haml that is meant to be tabbed

    .monthly_tab#selected
      Monthly
    .yearly_tab#notselected
      Yearly

And this is the JQuery code to switch between tabs. It does not work completely correctly. I can switch from .monthly_tab to .yearly_tab, but not back.

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

});

score 1 · Accepted Answer · answered Jun 11 '14 at 11:06

You can do it with inversion ids and classes:

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

additional class tab added for click function, so script will be extremely short:

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

EXAMPLE

score 1 · Answer 2 · answered Jun 11 '14 at 11:09

The click event is bound to the element matching "#notselected" only once - it does not get automatically bound to any new elements matching that id.

Insteand you need to unbind / bind the click event when switching over

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

score 0 · Answer 3 · answered Jun 11 '14 at 11:01

Sample Code for tabs try like this-

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

});

Refer this FIDDLE.

Reference

score 0 · Answer 4 · answered Jun 11 '14 at 11:09

you don't need to change the id from selected to notselected, just change it with class and try it like this

<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

Switching between tabs does not work with JQuery

4 Answers4