4つのクラスの1つを持つ小さなdivのグリッドで作業しています。クラスをフェードイン/ onclickイベントを使用します。たとえば、10個のdivがあり、3個が「class1」に分類されているとします。メニュー内のリンクをクリックすると、class1 divは完全に隠れているか、ほとんど見えなくなります。同様に、他のリンクは "class2"や "class3"などに対して同じ効果を引き起こします。また、それらをすべて戻す方法が必要です。もし誰かがそこに何かのアイデアを持っているのであれば、これはすでに私がその方向に押しつけることに感謝します。クリックするとそのクラス(カテゴリ)に基づいてdivを表示/非表示するjqueryプラグインがあります
3
A
答えて
0
$(".class1").fadeOut();
詳細はthe jQuery documentationを参照してください。 fadeIn()を使用すると、emを戻すことができます。
0
jqueryのは、すでにこれを行います。
$(".class1").fadeOut("slow");
$(".class1").fadeIn("slow");
2
が非常に簡単にtoggleで行わ:
$(document).ready(function() {
$('#IDOfLink').click(function() {
$('.class1').toggle("slow");//switch to show/hide when clicked
});
$('#anotherLinkID').click(function() {
$('.class2').toggle("fast");//switch to show/hide when clicked
});
//...etc...
});
マークアップは次のようになります。
のjQueryの中心部である<a id="IDofLink">Click here to toggle divs with the class of class1</a>
<div class="class1">Blah blah</div>
<div class="class1">Another class1 div</div>
2
!あなたはこのような何かをしたい:
$("#link-that-will-be-clicked").click(function() {
$(".class2,.class3,.class4").fadeOut();
});
が解決クリーナーを作るために、私はclass1
に加えcommon-class
のように、div
はね、共通のクラスをすべてを与えることをお勧めします。だから、可能性があります:
<div class="common-class class1"></div>
をこれはあなたのような単純なもの書くようになる:
$("#link-that-will-be-clicked").click(function() {
$(".common-class:not(.class1)").fadeOut();
});
をそして、すべてを復元する:
$(".common-class").fadeIn();
関連する問題
- 1. チェックボックスの値に基づいてクラスを表示/非表示Jquery
- 2. jQueryクリックに基づいてdivコンテンツをスワップして非表示にする
- 3. jquery:クラス名の変数に基づいた非表示/表示
- 4. divをクリックして非表示にすると非表示
- 5. divをラジオボタンの選択に基づいて表示/非表示
- 6. 検索入力に基づいてdivを表示/非表示
- 7. 選択に基づいてdivを表示/非表示
- 8. $ _GETに基づいてDivを表示/非表示
- 9. DIVの内容URLに基づいて非表示/表示
- 10. jqueryの同じボタンをクリックしてdivを表示/非表示にする必要があります
- 11. Javascript:ページタイトルに基づいてdivを表示/非表示にします。
- 12. 曜日に基づいてdivを表示/非表示しますか?
- 13. クリックするとdivを非表示にする必要があります
- 14. 複数のドロップダウン選択値に基づいてjavascriptまたはjqueryで非表示divを表示する
- 15. td値に基づいてカラムを非表示にするjquery
- 16. コンテンツに基づいてjqueryでtdを非表示にする
- 17. jQuery - クラスに基づいて異なるdivを表示して隠す
- 18. 子どものコンテンツに基づいてdivを非表示または表示
- 19. クリック表示Divで、そのDiv内のDiv1を3秒間表示してから非表示にする
- 20. 結果アイテムにあるカテゴリの種類に基づいてJavascriptでフィールドを非表示にして表示
- 21. オーバーフローに基づいて一部のdivを非表示にして表示
- 22. チェックボックスに基づいてdivを表示したり非表示にしたりする
- 23. 1 divを表示するとh2をクリックする他のdivを非表示
- 24. angularjs divを表示して入力フィールド内をクリックし、非表示にすると非表示にする
- 25. ラジオボックスに基づくDIVセクションの表示/非表示
- 26. 選択オプション(jQuery)に基づいて表の列を表示/非表示
- 27. URLに基づいてHTMLコードを表示するか非表示にする
- 28. jPlayer時間の更新に基づいてdivを表示/非表示
- 29. フォームの入力フィールドに基づいてdivを表示/非表示
- 30. スパンの動的値に基づいてDivを表示/非表示