JavaScript以外のすべてのリンクを非表示にしますか？

Question

javascript以外のすべてのリンクを非表示にする最適な方法は何ですか？ （jqueryのは大丈夫です）

は、私は次のことを持っていると言う：

<div id="choices"> 
    <div><a href="#">A<></div> 
    <div><a href="#">B</a></div> 
    <div><a href="#">C</a></div> 
</div> 

私はそのようなユーザーがクリックは1つが含まれていないA、B、またはC、のdivのリンク場合ということにしたいです選択された選択肢が警告ボックスにポップアップ表示されます。リセットボタンをクリックすると、すべてのdivが正常に表示されます。

例：ユーザーがAをクリックすると、BおよびCのdivが非表示になります。ユーザーがリセットボタンをクリックし、すべてが再び表示されます。

どうすればよいですか？

注：私はそれぞれA、B、C divのそれぞれにIDを割り当てていて、ユーザーがBをクリックすると、$（divnotclicked）.hide（）を呼び出して、隠す。そしてリセットボタンのために、私はちょうど$（A）.show（）、$（b）$ .show（）（C）.show（）のそれぞれに対して.show（）を実行します。 IDなしで私と一緒にやり遂げる方法。私はそれを行うための最善の方法を探しています。

私はこれを行うための最良の方法を探しています。それぞれの関数を手動で呼び出したり、 "choices" div内の各divにIDを割り当てることはできません。または、リセットボタンをクリックしたときに個々のdivを ".show"に呼び出す必要があります。

Answer 1

を、それは非常に簡単です：

$('#choices div').click(function() { $(this).siblings().hide(); }); 
$('#resetButton').click(function() { $('#choices div').show(); }); 

また、ここではこのコードのjsFiddleです動作中。一般に、jsFiddleは、jQuery（またはその他のフレームワーク）をプレイする必要があるときには、優れたツールです。

Answer 2

各リンクに個別のIDを付けます。誰かがあなたのいずれかのボタンをクリックしたときに、隠されたにクラスのCSS-可視性を設定し

<a class="mylinks" id="link01" href="someURL">friendly text</a> 

、その後、そのIDの可視性を設定します。例えば、それらのすべてに同じクラスを追加もう一度見えるようにボタンに属しています。

Answer 3

すべてのリンクを取得し、not方法使用して、クリックされた1削除ジャスト：jQueryを使って

$('#choices a').click(function(e){ 
    e.preventDefault(); // stop the click from activating the link 
    $('#choises a').not(this).parents().hide(); 
    // do something with the chosen link 
}); 

$('#reset').click(function(){ 
    $('#choices a').parents().show(); 
}); 

Answer 4

は、ここで私はそれを行うだろう方法は次のとおりです。

$('#choices a').click(function() { 
    $(this).parent().siblings().hide(); 
}); 

そして、リセット用：でhttp://jsfiddle.net/W9Sym/

Answer 5

：

<div id="choices"> 
    <div><a href="#">A</a></div> 
    <div><a href="#">B</a></div> 
    <div><a href="#">C</a></div> 
</div> 
<button>Reset</button> 

へ

$('#resetButton').click(function() { 
    $('#choices div').show(); 
}); 

はここで働い例です悪意を隠すそれは HTML

<div id='A'>Hi, I'm A</div> 
<div id='B'>Hello</div> 
<div id='C'>Aaargh!</div> 

<a href='#A'>A</a> 
<a href='#B'>B</a> 
<a href='#C'>C</a> 

<button type='reset'>Reset</button> 

jQueryの

$('a').click(function() { 
    var show = $(this).attr('href'); 
    $('div').each(function(e) { 
     $(this).not(show).hide(); 
    }); 
    e.preventDefault(); 
}); 

$('button').click(function() { 
    $('div').show(); 
}); 

冗長の種類、しかし：選択していないのdivをtainingとリセットを持ってそれらを表示、here's a demo

$(function() { 

    $('#choices').on('click', 'a', function() { //bind click handler to choices, for links 
     $(this).parent().siblings().hide();  //find the others and hide them 
    }); 

    $('button').on('click', function() {  //bind click to button 
     $('#choices > *').show();    //show all children of choices   
    }); 

});​ 

Answer 6

あなたはこれをやって試すことができます仕事を完了させるべきです。