How to add and remove class when user clicks and hover a link

Question

I have a list of menu items and i want to add same class when a user clicks on any li or add class on hover li.

I have a menu items like following:

$('#menu li').click(function() {
    $('#menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

$("#menu li").hover(
                function () {
                    $(this).addClass('active');
                }, 
                function () {
                    $(this).removeClass('active');
                });

http://jsfiddle.net/866pzu47/173/

the issue is if user clicks 'li' the class added to the li , when mouse over I need to remove the class added Due to the previous user click or again added the active iems.

Answer 1

Here is a simple way to do it

$('#menu li').click(function() {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
});

$("#menu li").hover(function () {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
});

jsFiddle Demo

But still your requirement is not clear as much to draw on jsFiddle so please have a look and let us know what exactly you required within this.

Edited

I have just added to different classes one for click active and another for hover active so try hover and then click you will find different between both functions

<script>
$('#menu li').click(function() {
    $('#menu li').removeClass('clickactive hoveractive');
    $(this).addClass('clickactive');
});

$("#menu li").hover(function () {
    $('#menu li').removeClass('hoveractive clickactive');
    $(this).addClass('hoveractive');
});
</script>

<style>
.hoveractive{
    color:red;
}  
.clickactive{
    color: green;
}
</style>

Here is an updated jsFiddle.

Answer 2

function myfun() {
    $('#menu li').removeClass('active');
    $(this).addClass('active');
}
$('#menu li').click(myfun);
$("#menu li").hover(myfun);

same as above one but dont maintain duplicates...

Answer 3

This will work for u..

$(document).ready(function(){

  $('#menu li').click(function() {
  $('#menu li').removeClass('active');
  $(this).addClass('active');
});

$("#menu li").hover(function(){
   $('#menu li').removeClass('active');
   }, function(){
   $(this).addClass('active');
   });
})

Answer 4

Adding the class on click and hover is not a good idea. It looks like your trying to have funcitonality for mobile and desktop.

Try checking the doc width and running code depending on screen size.

var docWidth = $(window).width();

if (docWidth <= 767) {
    $('#menu li').click(function() {
        $('#menu li').not(this).removeClass('active');
        $(this).addClass('active');
    });
}
else {
    $('#menu li').click(function() {
        $(this).addClass('active');
    }, function() {//note add callback function
        $(this).removeClass('active');
    });
}

Answer 5

You do not realize this but your $('#menu li').click event is actually called and the class does change but as you hover out of the li the mouseout effect takes place and the active class is removed. My suggestion is to make a new class active1 which is same as active when you click on an li the color does change only this time with mouseout effect won't remove active class from it as it was not there in the first place.

           $("#menu li").click(function () {
                $("#menu li").not(this).removeClass("active1");
                $(this).addClass("active1");
            });

            .active1{
                color: red;
            }

Answer 6

if you want to hover but the active class still there you can use this one and you can reduce script function as well.

$('#menu li').click(function() {
    $('#menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

li{

    color: blue;
}
li:hover{

    color: red;
}
.active{
    color:red;
    //background-image:'';
  }  
.active{
    color:red;
    //background-image:'';
  }  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>one</li>
<li>one</li>
<li>one</li>

</ul>

Answer 7

Try creating another css class named "clicked" and add that class on click and active on hover.

$('#menu li').click(function() {
    //alert("chala BC");
$('#menu li').not(this).removeClass('clicked');
$(this).addClass('clicked');
});

$("#menu li").hover(
            function () {
                $(this).addClass('active');
            }, 
            function () {
                $(this).removeClass('active');
            });