li要素交換クラスをホバーしてクリックしてください

Question

サイドナビゲーションを作成しようとしていますが、jQueryの経験はありません。

私がしたいのは、アクティブなもの以外のli要素にホバリングしたときに、アクティブなクラスと初期化されたクラスが削除されていますが、マウスをクリックせずにその要素を残すと、それがクリックされない限り、最初のli要素に戻ります。私はあなたがそのアイデアを得ることを望みます。

私は、ホバリングのことをやってみましたが、mouseleavesと同時に.click関数を実装する方法についても、初期のhtmlに戻す方法はわかりません。

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

とここに私のHTMLです： .mouseover() .mouseenter() .mouseleave() ...とより：https://api.jquery.com/category/events/mouse-events/

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>

Answer 2

は、追加のjqueryのマウスイベントを考えてみましょう。あなたは "偽を返す"必要はありません。最初のホバー機能で。それはおそらく実行を妨げるでしょう。これは、ページをリロードするデフォルトのリンク動作を中断しているため、クリックイベントでのみ必要です。

また、アクティブなクラスを2番目の関数の最初のリストアイテムに再度追加する必要があります。

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

Answer 3

あなたはほとんどそれを得た

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

作業JSFiddleです。私はあなたがそれぞれで何をしたいのかが異なるので、イベントをホバーに分割し、クリックしてマウスを離す必要がありました。私は変数stickyも使用していますので、どちらがアクティブな要素かを覚えています。私はあなたの質問を誤解している場合は

https://jsfiddle.net/yvLuLwon/3

コメントし、私はそれを修正しますしてください。