[英]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 . 我有一个菜单项列表,当用户单击任何li 或在悬停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/ 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. 问题是,如果用户单击“ li”,则将添加到li的类单击鼠标悬停时,我需要删除添加的类。由于上次用户单击或再次添加了活动的iems。
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');
});
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. 但是,您对使用jsFiddle的需求仍然不清楚,因此请看一看,让我们知道您在其中的确切要求。
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>
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... 与上述相同,但不保留重复...
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');
});
})
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');
});
}
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. 你没有意识到这一点,但您的
$('#menu li').click
事件实际上是调用和类不改变,但你悬停出的li
在mouseout
效应发生与active
类被删除。 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. 我的建议是创建一个新的
active1
类,它与单击li时的active
类相同,只是这次更改的颜色不会改变,因为mouseout
效果不会从中删除active类,因为它最初并不存在。
$("#menu li").click(function () {
$("#menu li").not(this).removeClass("active1");
$(this).addClass("active1");
});
.active1{
color: red;
}
if you want to hover but the active
class still there you can use this one and you can reduce script function as well. 如果您想悬停但
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>
Try creating another css class named "clicked" and add that class on click and active on hover. 尝试创建另一个名为“ clicked”的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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.