CODEWITHSUNDEEP
javascriptjquerycssremoveclass
Gobinath M
Gobinath M

Reputation: 2021

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

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.

Upvotes: 0

Views: 1995

Answers (7)

Dinesh Verma
Dinesh Verma

Reputation: 666

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

Upvotes: 0

Mark Valenzuela
Mark Valenzuela

Reputation: 358

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>

Upvotes: 0

rexroxm
rexroxm

Reputation: 878

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

Upvotes: 0

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

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.

Upvotes: 1

Web Dev Guy
Web Dev Guy

Reputation: 1789

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

Upvotes: 0

Minksmnm
Minksmnm

Reputation: 264

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

Upvotes: 0

Manikanta Reddy
Manikanta Reddy

Reputation: 857

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

Upvotes: 0

Related Questions