Javascript garde une div cachée jusqu'à ce que vous cliquiez sur un bouton, vous avez besoin d'aide pour modifier

Fondamentalement, mon code de droit de garde maintenant quelques-uns des divs que j'ai sur mon site web caché et puis quand vous cliquez sur un lien, il rend les divs apparaissent.

J'ai besoin d'aide, de sorte qu'il sorte que lorsque je clique sur un lien et une div qui s'affiche et que je clique sur un autre lien, celui de la précédente disparaît.

Donc, disons que je clique sur le lien "a Propos", la div s'affiche, bon. Puis je clique sur "Aide" et que div semble simplement SUR "à Propos de" faire les choses en désordre.

<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 de cela dans mon site web:

    <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 'c3' est juste le 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;
}

Mise à JOUR:

Désolé, je devrais donner plus de détails..
J'ai besoin d'être en mesure de fondamentalement cliquez sur un premier lien et afficher une zone de texte.

puis cliquez sur un second lien qui permet de masquer la boîte de texte associé avec le premier lien et de montrer un nouveau qui est associé avec le 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;}

source d'informationauteur Megatoaster

Vous pouviez faire comme cela, si vous souhaitez afficher et de masquer particulier div sur un clic de 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: de Passer l'autre div id qui vous voulez faire disparaître sur le clic de la div. Veuillez mettre à jour votre code avec ci-dessous de code.

SCRIPT

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

Je ne comprends pas votre question correctement. Mais si vous essayez de faire différentes div d'éléments visibles en cliquant sur les différents liens, alors c'est ce que vous devez 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();
});
});

Aussi n'oubliez pas d'ajouter la bibliothèque jQuery.

Vous devez vous connecter pour publier un commentaire.