Javascript Girl
  1. Javascript Girl
  3. Javascript tient un div caché jusqu'à ce que vous cliquez sur un bouton, besoin d'aide pour modifier
Intereting Posts
Ajoutez la fonction "Zoomability" à une donnée de traitement de carte d3.js de dc.js / crossfilter JQuery .selector propriété supprimée, solution de contournement? $ Resource.query return split strings (array of char) au lieu d'une chaîne Enregistrement des informations d'identification dans le stockage local JavaScript: comment calculer la date il y a 2 jours? JQuery ne publie pas toutes les entrées d'un formulaire après le .append () Existe-t-il un moyen de vérifier le test d'accessibilité du serveur dans jQuery Promesses en chaîne avec AngularJS TinyMCE génère des tags <g> aléatoires Dessiner 10 000 objets sur toile javascript Javascript regex pour mot de passe contenant au moins 8 caractères, 1 numéro, 1 supérieur et 1 minuscule Comment vérifier si une propriété d'objet existe avec une variable contenant le nom de la propriété? Quelle version de jQuery devrais-je utiliser? Les événements Javascript load vs ready vs domready vs DOMContentLoaded Obtenir l'écran vide après avoir exécuté le script d'application Web Google

Javascript tient un div caché jusqu'à ce que vous cliquez sur un bouton, besoin d'aide pour modifier

Fondamentalement, mon code maintenant garde quelques-unes des divs que j'ai sur mon site caché, puis lorsque vous cliquez sur un lien, les divs apparaissent.

J'ai besoin d'aide pour que, lorsque je clique sur un lien, un div apparaît et je clique sur un autre lien, le précédent disparaît.

Alors disons que je clique sur le lien 'À propos', la div apparaît, bien. Ensuite, je clique sur 'Aide' et que div apparait juste 'À propos' qui rend les choses désordonnées. 

<script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; }} </script>

^ C'est mon code, voici un exemple dans mon site: 

  <div id="about" class="hidden"> <div class="content3"> <p>This is the about section.</p> <p>It is currently still being worked on.</p> </div> </div>

La classe 'content3' est juste un style dans mon fichier css. 

 .content3 { background-color:#FFFFFF; width:750px; height:600px; padding:5px; padding-left:40px; margin-top:-650px; margin-left:auto; margin-right:auto; }

METTRE À JOUR:

Désolé, je devrais élaborer plus … Je dois pouvoir cliquer sur un premier lien pour le faire afficher une boîte de texte.

Puis cliquez sur un deuxième lien qui cachera cette zone de texte associée au premier lien et affichera un nouveau qui est associé au second lien.

C'est mon code complet:

HTML 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; }} </script> </head> <body> <div class="title"> <p class="text_header">Benjamin Midyette</p> <p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p> </div> <div class="content" align="left"> <p style="padding-top:20px"> <a href="javascript:unhide('link')" class="button">This is a link</a><br><br> <a href="javascript:unhide('about')" class="button">About</a> </p> </div> <div id="Resume" class="content2"></div> <div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;"> <img alt="A Link" src="pictures/link.png" height="420" width="420"> </div> <div id="about" class="hidden"> <div class="content3"> <p>This is the about section.</p> <p>It is currently still being worked on.</p> </div> </div> </body> </html>

CSS: 

 body { background-image:url('http://www.nsgaming.us/pictures/nebula.png'); background-repeat: no-repeat; background-size: 100% auto; background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;} /*Text styling*/ .text_header { font-size:72px } .title { margin-top:-30px; margin-left:auto; margin-right:auto; text-align: center; color:#ffffee; width:600px; border-radius:8px; background-color:#000000; background:rgba(0,0,0,.9); padding-bottom:1px; } /*Top Button styling*/ .button { border:2px solid black; background: #3B3B3B; /*#8C8C8C*/ padding: 3.5px 5px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: white; font-size: 18px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; } .button:hover { background: #770819; color: #ffffff; text-decoration:none;} .button:active { background: #590819;} .content { margin-top:40px; border: 1px solid black; border-radius:8px; Opacity:0.8; background:#222222; width:175px; height:400px; padding-left:20px; padding-top: 0px;} .content2 { background-color:#222222; border-radius:4px; width:800px; height:650px; padding:5px; padding-left:40px; margin-top:-401px; margin-left:auto; margin-right:auto; } .content3 { background-color:#FFFFFF; width:750px; height:600px; padding:5px; padding-left:40px; margin-top:-635px; margin-left:auto; margin-right:auto; } .hidden { display: none; } .unhidden { display: block; } container { align:right;} opener { align:left;}

Vous pourriez faire comme ceci, si vous voulez afficher et cacher div particulier en clic sur bouton. 

 <style> .hidden{ display:none; } .unhidden{ display:block; } </style> <script type="text/javascript"> function unhide(clickedButton, divID) { var item = document.getElementById(divID); if (item) { if(item.className=='hidden'){ item.className = 'unhidden' ; clickedButton.value = 'hide' }else{ item.className = 'hidden'; clickedButton.value = 'unhide' } }} </script> <body> <div id="about" class="hidden"> <div class="content3"> <p>This is the about section.</p> <p>It is currently still being worked on.</p> </div> </div> <input type="button" onclick="unhide(this, 'about') " value="unhide"> </body>

MISE À JOUR: Passez l'autre div id que vous voulez faire disparaître sur le clic de div. Veuillez mettre à jour votre code avec le code ci-dessous.

SCÉNARIO 

 <script type="text/javascript"> function unhide(divID, otherDivId) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } document.getElementById(otherDivId).className = 'hidden'; } </script>

HTML 

 <p style="padding-top:20px"> <a href="javascript:unhide('link', 'about')" class="button">This is a link</a><br><br> <a href="javascript:unhide('about', 'link')" class="button">About</a> </p>

Hé, je ne comprends pas votre question correctement. Mais si vous essayez de faire apparaître différentes divs différentes en cliquant sur différents liens, alors c'est ce que vous devriez faire. 

 <div id = "anchor-div"> <ul> <li> <a id="about-anchor" href="javascript:;"> About</a> </li> <li> <a id="help-anchor" href="javascript:;> Help </a> </li> </ul> </div> <div id="content-div"> <div id="about-content"></div> <div id="help-content"></div> </div> 

 $(document).ready(function(){ //if you wish to keep both the divs hidden by default then dont forget to hide //them $("#help-content").hide(); $("#about-content").hide(); $("#about-anchor").click(function(){ $("#help-content").hide(); $("#about-content").show(); }); $("#help-anchor").click(function(){ $("#help-content").show(); $("#about-content").hide(); }); });

N'oubliez pas non plus d'ajouter la bibliothèque jquery.