Javascript 将鼠标悬停并单击li元素更改类

我正在尝试创建侧导航，但我没有使用jQuery的经验

我想做的是，当鼠标悬停在除活动元素之外的任何其他li元素上时，悬停的元素将获得。活动类和首字母已删除该类，但当鼠标未单击该元素而离开该元素时。除非单击该元素，否则活动类将再次转到第一个li元素。我希望你能明白

我试着做了。悬停悬停的事情，但我不知道当鼠标移动时如何恢复到初始html，也不知道如何实现。同时单击函数

$("#nav li").hover(function() {
    $("#nav li").removeClass("active");
    $(this).addClass("active");                   
    return false;
}, 
function () {
     $(this).removeClass("active");
});          

这是我的HTML：

<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

考虑其他jquery鼠标事件：

.mouseover（）

.mouseenter（）

---

.mouseleave（）

。。。还有更多：

考虑其他jquery鼠标事件：

.mouseover（）

.mouseenter（）

---

.mouseleave（）

。。。还有更多：

你几乎成功了。在第一个悬停函数中不需要“return false；”。这可能会干扰执行。这仅在单击事件时才需要，因为您正在中断重新加载页面的默认链接行为

您还需要在第二个函数中将活动类再次添加到第一个列表项中

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

---

你差点就成功了。在第一个悬停函数中不需要“return false；”。这可能会干扰执行。这仅在单击事件时才需要，因为您正在中断重新加载页面的默认链接行为

您还需要在第二个函数中将活动类再次添加到第一个列表项中

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

---

您的代码几乎完成了，您可以查看下面的代码片段以获得完整的工作结果

$（“#导航li”）.悬停（函数（）
{
$（“资产净值”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
返回false；
}, 
函数（）
{
$（“资产净值”）.removeClass（“活动”）；
$（“资产净值：第一”）.addClass（“活动”）；
}
);  
.active
{
背景色：红色；
}






您的代码几乎完成了，您可以查看下面的代码片段以了解完整的工作结果


$（“#导航li”）.悬停（函数（）
{
$（“资产净值”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
返回false；
}, 
函数（）
{
$（“资产净值”）.removeClass（“活动”）；
$（“资产净值：第一”）.addClass（“活动”）；
}
);  
.active
{
背景色：红色；
}






这是一个正在工作的JSFIDLE。我需要将事件分为悬停、单击和鼠标移动，因为您想要在每个事件上执行的操作是不同的。我还使用了变量
sticky
，这样它就可以记住哪一个是活动元素


如果我误解了你的问题，请发表评论，我会解决的。
这里是一个工作指南。我需要将事件分为悬停、单击和鼠标移动，因为您想要在每个事件上执行的操作是不同的。我还使用了变量
sticky
，这样它就可以记住哪一个是活动元素


如果我误解了你的问题，请评论，我会改正的