jquery hoverでタブを切り替え、クラスを削除する{display：none}

表示を切り替える3つのコンポーネントがあります。jquery hoverでタブを切り替え、クラスを削除する{display：none}

私が持っているしたいトグルメカニックは次のとおりです。

つだけ#wrapは、時間の任意の時点での表示です。デフォルトは任意の＃折り返しにすることができます。
カテゴリ1でマウスが検出されると、wrap1が表示され、wrap2とwrap3は非表示になります。 category2、category3と同じです。
マウスはカテゴリ1を離れることができますが、wrap1は引き続き表示されます。 category2、category3と同じです。
マウスが別のカテゴリでホバーすると、対応する折り返しが引き継がれ、新しい「アクティブ」表示になります。
基本的にアクティブな表示は、カテゴリdivの上にホバーすることによって「アクティブ化」されます。
私はjsfiddleを提供しましたが、ここに貼り付けるには長すぎるかもしれません。

現在のところ、javascriptコードは正常に見えますが、全く機能しません。助けていただきありがとうございます！

(function($) { 
    "use strict"; // Start of use strict 

     $("#catbox1").mouseenter(function() { 
     $("#wrap1").removeClass('hidden'); 
     $("#wrap2").addClass('hidden'); 
     $("#wrap3").addClass('hidden'); 
     }); 

     $("#catbox2").mouseenter(function() { 
     $("#wrap1").addClass('hidden'); 
     $("#wrap2").removeClass('hidden'); 
     $("#wrap3").addClass('hidden'); 
     }); 

     $("#catbox3").mouseenter(function() { 
     $("#wrap1").addClass('hidden'); 
     $("#wrap2").addClass('hidden'); 
     $("#wrap3").removeClass('hidden'); 
     }); 

    }(jQuery)); // End of use strict

フィドル更新：は不必要な要素を削除し、より多くの表記法を作りました。

基本的には、マウスセンターの機能が動作していないようです。表示が常にオンであるため、クラスが追加または削除されているような気がしません。マッチした要素を表示し.show()

https://jsfiddle.net/0rsph8s8/20/

出典

2016-09-25 iWillGetBetter

は、私はまだ '.hidden＃のWRAP1' にCSSの参照元を我慢する必要、問題は私のcssであると思います。 – iWillGetBetter

ラップをデフォルトで表示しますか？ –

@ Loading ..最初の折り返しをデフォルトで表示します。質問してくれてありがとう！ – iWillGetBetter

は、私はあなたのコードを濾過し、クリックされた要素を、対応するごとに表示/非表示する方法を示してきました参照してください。

クラスを追加/削除するだけで済みます。

(function($) { 
 
    "use strict"; // Start of use strict 
 

 
    
 
    $("#catbox1").mouseenter(function() { 
 
    $("#wrap1").removeClass('hidden');  
 
    $("#wrap2").addClass('hidden'); 
 
    $("#wrap3").addClass('hidden'); 
 
    }); 
 

 
    $("#catbox2").mouseenter(function() { 
 
    $("#wrap1").addClass('hidden'); 
 
    $("#wrap2").removeClass('hidden'); 
 
    $("#wrap3").addClass('hidden'); 
 
    }); 
 

 
    $("#catbox3").mouseenter(function() { 
 
    $("#wrap1").addClass('hidden'); 
 
    $("#wrap2").addClass('hidden'); 
 
    $("#wrap3").removeClass('hidden'); 
 
    }); 
 

 
}(jQuery)); // End of use strict

.hidden 
 
{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="wrap"> 
 
    <div class="catbox" id="catbox1"> 
 
     <div class="catboxInner"> 
 
     <div class="catboxInnerText">Winding garden path</div> 
 
     </div> 
 
    </div> 
 
    <div class="catbox" id="catbox2"> 
 
     <div class="catboxInner"> 
 
     <div class="catboxInnerText">Winding garden path</div> 
 
     </div> 
 
    </div> 
 
    <div class="catbox" id="catbox3"> 
 
     <div class="catboxInner"> 
 
     <div class="catboxInnerText">Winding garden path</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="wrap" id="wrap1"> 
 
    wrap1 
 
    </div> 
 
    <!--end of wrap--> 
 

 
    <div class="wrap hidden" id="wrap2"> 
 
    wrap2 
 
    </div> 
 
    <!--end of wrap--> 
 

 
    <div class="wrap hidden" id="wrap3"> 
 
    wrap3 
 
    </div> 
 
</body>

出典

2016-09-25 08:03:47

ありがとうございますLoading ..これはきれいに働いた:) – iWillGetBetter

@iWillGetBetterいいえ、それはあなたのために働いたことを嬉しく思います。 –

。

.hide()一致する要素を非表示にします。

これを試してみてください。

(function($) { 
    "use strict"; // Start of use strict 

    $("#catbox1").mouseenter(function() { 
    $("#wrap1").show(); 
    $("#wrap2").hide(); 
    $("#wrap3").hide(); 
    }); 

    $("#catbox2").mouseenter(function() { 
    $("#wrap1").hide(); 
    $("#wrap2").show(); 
    $("#wrap3").hide(); 
    }); 

    $("#catbox3").mouseenter(function() { 
    $("#wrap1").hide(); 
    $("#wrap2").hide(); 
    $("#wrap3").show(); 
    }); 

}(jQuery)); // End of use strict

フィドルリンク：https://jsfiddle.net/0rsph8s8/10/

出典

2016-09-25 06:56:20

あなたは何を変えましたか？ –

@ Md.KhairulHasanありがとうございました！リフレッシュ時に3つのラップがすべて表示されないように、追加のCSS行を書き込むために必要なことは、下記の回答の読み込みを参照してください。ありがとうございました！ – iWillGetBetter

jquery hoverでタブを切り替え、クラスを削除する{display：none}

答えて

関連する問題