Verstecken Sie alle Links außer einem in Javascript?

Question

Was ist der beste Weg, um alle Links außer einer in Javascript zu verstecken? (Jquery ist in Ordnung)

Sagen wir, ich habe folgendes:

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

Ich will es machen, so dass, wenn ein Benutzer klickt Link A, B oder C, die divs, die den einen nicht enthalten, dass wurde ausgewählt verschwinden und die ausgewählte Auswahl erscheint in einer Alarmbox. Nach einem Klick auf eine Reset-Taste erscheinen wieder alle Divs wie gewohnt.

Beispiel: Der Benutzer klickt auf A, und die B- und C-divs werden ausgeblendet. Der Benutzer drückt die Reset-Taste und alle werden wieder angezeigt.

Wie bewerkstellige ich das?

HINWEIS: Ich habe IDs zu jedem der A, B, C divs zugeordnet und eine Funktion erstellt, wo, wenn der Benutzer auf B klickt, ruft es eine $ (divnotclicked) .hide() für diejenigen, die ich möchte verbergen. Und für den Reset-Button mache ich einfach .show() für jeden von ihnen $ (A) .show(), $ (b) $ .show() (C) .show() .... aber es muss eine sein mit mir ohne Zuordnung von IDs zu jedem von ihnen. Ich suche nach dem besten Weg, es zu tun.

Ich bin auf der Suche nach dem besten Weg, dies zu tun, vorzugsweise ohne manuell Funktionen für jeden von ihnen oder die Zuweisung von IDs zu jedem Div innerhalb der "Auswahl" div. Oder Sie müssen jedes einzelne Div aufrufen, wenn Sie auf "Zurücksetzen" klicken.

Answer 1

Mit jQuery, dann ist es ganz einfach:

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

Auch hier ist ein jsFiddle mit diesem Code in Aktion. Im Allgemeinen ist jsFiddle ein hervorragendes Werkzeug, wenn Sie mit jQuery (oder anderen Frameworks) spielen müssen.

Answer 2

geben Sie jedem Link seine individuelle ID. und fügen Sie die gleiche Klasse zu allen von ihnen Zum Beispiel:

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

dann, wenn jemand auf einen der Buttons klickt, setzen die CSS-Sichtbarkeit der Klasse verborgen, und legen Sie die Sichtbarkeit der ID einzugeben, gehört zur Schaltfläche, um wieder sichtbar zu sein.

Answer 3

einfach alle Links erhalten und die eine entfernen, die mit der not Methode geklickt wurden:

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

Hier ist, wie ich es tun würde:

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

Und für den Reset:

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

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/W9Sym/

Answer 5

mit:

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

zu verstecken Sie den Betrug Taining divs derjenigen, die nicht ausgewählt und haben sie die Reset zeigen, kann

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

Sie dies versuchen zu tun: 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(); 
}); 

Art ausführlich, aber es sollte den Job erledigen.