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

Question

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

我想要做的是，当鼠标悬停在事件元素以外的任何其他 li 元素上时，悬停的元素会获得 .active 类，并且第一个元素会删除该类，但是当鼠标离开该元素而不单击它时，.active 类会再次出现到第一个 li 元素，除非单击它。我希望你能明白。

我尝试用 .hover 做悬停的事情，但我不知道如何在鼠标离开时恢复到初始 html 以及如何同时实现 .click 功能。

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

Answer 1

您的代码即将完成，您可以查看下面的代码片段以获取完整的工作结果。

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

.active
{
   background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>