Как добавить и удалить класс, когда пользователь нажимает и парить ссылку

Question

У меня есть список пунктов меню и я хочу, чтобы добавить тот же класс, когда пользователь нажимает на любой Liили надстройкой класса на парения литий.

У меня есть пункты меню, как следующее:

$('#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/

вопрос, если пользователь нажимает «ли» класс добавляется к ли, когда мышь над мне нужно удалить добавил класс Из-за предыдущего пользователя нажмите или снова добавьте активные iems.

Answer 1

Вот простой способ сделать это

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

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

jsFiddle Demo

Но все-таки ваше требование не ясно, как много рисовать на jsFiddle поэтому, пожалуйста, посмотрите и дайте нам знать, что именно вам требуется в этом.

Edited

Я просто добавил к различным классам один за клик активной и другой для висения активным, чтобы попытаться парить, а затем нажмите кнопку вы найдете различные между обеими функциями

<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 является обновленной jsFiddle ,

Answer 2

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

же, как и выше один но не поддерживать дубликаты ...

Answer 3

Это будет работать для и ..

$(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

Добавление класса на щелчок и зависании не является хорошей идеей. Похоже, вы пытаетесь создать функциональность для мобильных и настольных компьютеров.

Попробуйте проверить ширину и рабочий код документа в зависимости от размера экрана.

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

Вы не понимаете это, но ваш $('#menu li').click событие на самом деле называется и класс делает изменения, но, как вы наведете из limouseout эффект имеет место и active класс удаляется. Мое предложение состоит в том, чтобы создать новый класс active1, который является таким же, как active, когда вы нажимаете на символ, который меняется только на этот раз с эффектом mouseout, не удаляет из него активный класс, поскольку его там не было.

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

      .active1{ 
       color: red; 
      } 

Answer 6

, если вы хотите, чтобы парить, но active класс по-прежнему есть вы можете использовать это, и вы можете уменьшить функцию сценария, а также.

$('#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

Попробуйте создать еще один класс CSS под названием «щелкнул» и добавить этот класс по щелчку и активным при наведении курсора мыши.

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