Cette guides JavaScript tutorial vous pour établir un code JavaScript pour cacher et montre les éléments HTML dans les pages web, le travail avec l'ID élément.
- Demo
- Agrandir
- Recharger
- New window
Gratuit iPage hébergement Web pour la première année MOMENT
Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?
Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
This is a quick tutorial to explain how you can easily show and hide page elements with javascript.
To begin with, each item that you want to hide/show should have a unique HTML ID. Let's begin with a very simple HTML page.
<h1>This is my title</h1> <div id="content"> <h2>Div1 Follows</h2> <div id="div1"> This is where my first div will be. </div> <h2>Div2 Follows</h2> <div id="div2"> This is where my second div will be. </div> </div>
We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).
function hideAll() { var myDivs = Array('div1','div2') // Add each div ID to this array for(var i in myDivs) { if(document.getElementById(myDivs[i]) { document.getElementById(myDivs[i]).style.display = 'none'; } } }
That function, when called, will hide all of the divs that are included in the "myDivs" array. However, we need a way to show the appropriate divs again, so we are going to modify the function slightly to insert a new link where the div should be.
function hideAll() { var myDivs = Array('div1','div2') // Add each div ID to this array for(var i in myDivs) { if(document.getElementById(myDivs[i])) { document.getElementById(myDivs[i]).style.display = 'none'; if(!document.getElementById('linkto_'+myDivs[i])) { var myLink = document.createElement('a'); myLink.id = 'linkto_'+myDivs[i]; myLink.href = '#'+myDivs[i]; myLink.onclick = function() { showDiv(this.href); //return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked return true; }; myLink.appendChild(document.createTextNode('Expand this entry')); document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling); } } } }
Now that we've inserted links that will show the divs, we need to actually write the function that's going to reveal the div when the link is clicked.
function showDiv(what) { hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array if(document.getElementById(what)) { document.getElementById(what).style.display = ''; if(document.getElementById('linkto_'+what)) { document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what)); } } }
Now, we'll put these two functions together at the very bottom of our document (just above the closing body tag) and will then call the appropriate functions. I've also added a little bit of script that will check to see if someone loaded the page trying to access a specific div, and will show that div if so. Therefore, the entire body section of our HTML page will look like:
<body> <h1>This is my title</h1> <div id="content"> <h2>Div1 Follows</h2> <div id="div1"> This is where my first div will be. </div> <h2>Div2 Follows</h2> <div id="div2"> This is where my second div will be. </div> </div> <script type="text/javascript"> function hideAll() { var myDivs = Array('div1','div2') // Add each div ID to this array for(var i in myDivs) { if(document.getElementById(myDivs[i])) { document.getElementById(myDivs[i]).style.display = 'none'; if(!document.getElementById('linkto_'+myDivs[i])) { var myLink = document.createElement('a'); myLink.id = 'linkto_'+myDivs[i]; myLink.href = '#'+myDivs[i]; myLink.onclick = function() { showDiv(this.href); //return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked return true; }; myLink.appendChild(document.createTextNode('Expand this entry')); document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling); } } } } function showDiv(what) { hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array if(document.getElementById(what)) { document.getElementById(what).style.display = ''; if(document.getElementById('linkto_'+what)) { document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what)); } } } hideAll(); if(window.location.hash) { showDiv(window.location.hash); } </script> </body>
- Sent (0)
- Nouveau
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI