document.getElementById(id) et le basculement de multiples identifiants

J'ai cette fonction simple qui permet de passer d'un élément masqué dans la page web.

function showtable(id) 
 {
 if(document.getElementById(id).style.display == 'block')
  {
document.getElementById(id).style.display = 'none';
  }else{
document.getElementById(id).style.display = 'block';
}
 } 


<input type="button" value="Toggle" onclick="showtable('id');" />

Cela fonctionne bien, mais je veux la désactiver certains autres (tableau) élément (avec certains ids) (à l'exception de celui qui est basculé, que ce soit sur on ou off) sur la page chaque fois que le bouton est cliqué.

L'objectif est irréalisable, parce que “les autres” comprend les body élément, et la mise display: none cache tous ses descendants (y compris votre bouton). Veuillez préciser. Expliquant pourquoi vous faites cela peut aider, aussi.
Désolé d'être douteuse. J'ai édité ma question. J'ai besoin de cacher certains autres éléments de la table qui est déjà visible parce qu'elle n'a pas l'air bon, si si deux de l'élément de tableau est visible à la fois. Je veux ne faire qu'un seul élément de tableau est visible pour le moment.

OriginalL'auteur user1575698 | 2012-08-04

  1. 4

    Vous pouvez utiliser jQuery, mais si vous ne voulez pas l'utiliser, c'est un pur exemple en javascript. Pour voir comment il fonctionne, copier coller dans un fichier texte, l'enregistrer en tant que test.htm et de l'ouvrir dans un navigateur. Il contient trois tables, chacune avec un bouton au-dessus d'elle. Lorsque vous cliquez sur un bouton, c'est le tableau s'affiche et toutes les autres tables seront cachés. Si vous avez besoin de plus de tables, de leur donner un id, et ajouter leur id dans le tableau dans la fonction: 

    var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];

    Si vous voulez être en mesure de basculer la table également, il sera bien sûr également besoin d'un bouton: 

    <input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />

    exemple:

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showtable(id) {
var ids = ["redTable", "greenTable", "blackTable"];
for(var i = 0; i < ids.length; i++) {
if(ids[i] != id)
document.getElementById(ids[i]).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br />
<table style="width: 100px; height: 100px; background-color: red;" id="redTable">
<tr>
<td>redTable</td>
</tr>
</table>
<input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br />
<table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable">
<tr>
<td>greenTable</td>
</tr>
</table>
<input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br />
<table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable">
<tr>
<td>blackTable</td>
</tr>
</table>
</body>
</html>
    A travaillé comme de la magie.

    OriginalL'auteur Tom

  2. 2

    Vous pouvez sélectionner tous les autres éléments du DOM, leur attribut d'affichage à "none", et ensuite seulement de montrer celui qui doit être visible.

    Une autre solution serait de garder une trace de l'élément visible dans une variable:

    var visibleElement = null;

    Lorsque vous modifiez un élément, vous faites qu'on l'élément visible et de cacher la déjà visible:

    //Hide the previously visible element, if any.
if (visibleElement != null)
{
visibleElement.style.display = 'none';
}
//Make your new element the visible one.
visibleElement = document.getElementById(id)
visibleElement.style.display = 'block';

    OriginalL'auteur svanryckeghem

  3. 1

    Facile à l'aide de jQuery. Par exemple, donner à chaque basculé élément d'une classe comme toggle_element et ensuite en JS:

    $('.toggle_element').hide();
$('#id').show();

    Cela permet de masquer tous les éléments avec la classe toggle_element et de montrer de l'élément avec l'id id.

    JSFiddle exemple ici.

    Pourquoi pensez-vous fournir jQuery solution à une question où OP est clairement à l'aide de matières JavaScript?
    parce que l'OP est en train de faire quelque chose qui peut être facilement réalisé à l'aide de jQuery et j'ose dire qu'il est pas au courant de cette
    C'est très simple tâche et depuis l'OP apparemment n'est pas à l'aide de jQuery, je ne voudrais pas lui proposer de lui ajouter de l'ensemble du framework JavaScript uniquement pour exécuter cette action. Jetez un oeil à la accepté de répondre, pour voir que c'est facilement réalisable en JavaScript aussi. De toute façon vous avez donné une bonne alternative pour les personnes qui utilisent déjà jQuery.
    Je vais donner raw JS premier la prochaine fois, je vous Remercie pour la réponse 🙂

    OriginalL'auteur Kurt