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