3

MY Jquery Code:

   $('a#cusine1').on('click', function(){  
        $('div#product-list').html("LOADING..........").show();  

        $(".ccid").addClass("0");
        document.getElementById("ccid1").className="active2";     

    });  


        $('a#cusine2').on('click', function(){  
        $('div#product-list').html("LOADING..........").show();  
        $(".ccid").addClass("0");
        document.getElementById("ccid2").className="active2";

    });  


        $('a#cusine3').on('click', function(){  
        $('div#product-list').html("LOADING..........").show();  
        $(".ccid").addClass("");
        document.getElementById("ccid3").className="active2";

    });

MY HTML CODE

      <li id="ccid1" class="ccid">
             <a href="#" id="cusine1"><i class="fa fa-ticket"></i>3 Star Hotel</a>                                  </li>
        <li id="ccid2" class="ccid">
              <a href="#" id="cusine2"><i class="fa fa-ticket"></i>3 Star Hotel</a>                            </li>
        <li id="ccid3" class="ccid">
   <a href="#" id= "cusine3"><i class="fa fa-ticket"></i>5 Star Hotel</a>
     </li>

OUTPUT NEEDED:

I need, when li id "ccid1" is clicked, the class "active2" should be added. other li should have only "ccid" class.

The number of li may change based on the PHP.

PROBLEM FOUND

In first time, when click li id "ccid1", the class "active2" is added. Then, if the li id "ccid2" clicked the class "active2" is added, but the li id "ccid1" class not set to "0".

Improve this question
3
  • 2
    Try not to use numeric classNames (specially if you target them in CSS). instead use name0 or unselected or whatever descriptive. Commented May 31, 2015 at 15:27
  • i am also tried this but it also not work Commented May 31, 2015 at 15:28
  • Are you hoping the active2 class will jump from one to another? Because if you click all 3, then all 3 will have the class active2. Commented May 31, 2015 at 15:30

3 Answers 3

Reset to default
3

A css class name cannot start with a number (CSS grammar) and any element can have more than a class, so if you need to remove a class (or set it to none) you should use removeClass

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Well, it can be numeric since HTML5. But I don't recommend it.
@StephanWeinhold ID can be numeric since HTML5. Classes don't. I mean they can (the class will be applied ofc.) but you'll fail to target such classes in CSS.
javascript support it but that's CSS3 still not supporting it, it will be in CSS4 AFAIK edit: or maybe only for IDs, not sure seeing Roko's comment
1

As I've said in my comment, don't use classNames starting with / only - Number.

This is all you need:

$('.ccid a').on('click', function(){              // This targets all your links
    $('div#product-list').html("LOADING..........").show();  
    $(".active2").removeClass("active2");         // Remove existent active classes
    $(this).parent(".ccid").addClass("active2");  // Set active class 
});
Improve this answer

1 Comment

Thanks Friend. This code is work for me. Thanks Again
0

I am making a bit of a guess as to what you need, and this code is untested:

$('li.ccid').on('click', function(){  
    $(".ccid").removeClass("active2");
    $(this).addClass("active2");
});

So when any li with a class of ccid is clicked:

  1. We ensure class "active2" is removed from all such li
  2. Class "active2" is added to the one which was clicked
Improve this answer

1 Comment

Thanks for your support. This is worked when use code $(this).parent(".ccid").addClass("active2"); instead of $(this).addClass("active2");