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".

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
    – user4564807
    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

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

3
  • 1
    Well, it can be numeric since HTML5. But I don't recommend it. Commented May 31, 2015 at 15:30
  • 1
    @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. Commented May 31, 2015 at 15:32
  • 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
    – A. Wolff
    Commented May 31, 2015 at 15:32
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 
});  
1
  • 1
    Thanks Friend. This code is work for me. Thanks Again
    – user4564807
    Commented May 31, 2015 at 15:34
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
1
  • Thanks for your support. This is worked when use code $(this).parent(".ccid").addClass("active2"); instead of $(this).addClass("active2");
    – user4564807
    Commented May 31, 2015 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.