我的菜单项列表，我想添加同一类，当用户点击任何李或添加类悬停李。如何添加和删除类当用户点击，鼠标悬停在一个链接

我有一个像下面的菜单项：

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

来源

2017-02-01 CodeMan

悬停你可以直接使用：悬停不知道你要求的是这个http://jsfiddle.net/866pzu47/175/？ –

@hover类我需要显示引导程序图标... – CodeMan

@kukkuz：我修改了 – CodeMan

这里有一个简单的方法来做到这一点

$('#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所以请看看，让我们知道你需要什么在此范围内。

编辑

我刚刚加入到不同的类别之一点击活跃，另一个用于悬停活跃所以尽量悬停，然后点击你会发现这两个函数

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

来源

2017-02-01 05:03:08

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

同一个以上，但不保持重复...

来源

2017-02-01 05:08:08

这将为ü工作..

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

来源

2017-02-01 05:09:02 Minksmnm

增加点击次数和悬停类是不是一个好主意。它看起来像你试图为移动和桌面有funcitonality。

尝试根据屏幕大小检查文档宽度和运行代码。

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

来源

2017-02-01 05:10:26

你还没有意识到这一点，但你$('#menu li').click事件实际上是调用和类不改变，但你悬停出li的mouseout效应发生和active类被删除。我的建议是创建一个新类active1，它与active相同，当你点击一个li颜色确实只改变mouseout效果不会从它移除活动类，因为它不在那里。

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

      .active1{ 
       color: red; 
      }

来源

2017-02-01 05:13:39 rexroxm

如果要悬停但 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>

来源

2017-02-01 05:20:47

尝试创建另一个名为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'); 
      });

来源

2017-02-01 06:33:20

如何添加和删除类当用户点击，鼠标悬停在一个链接

回答

编辑

相关问题