web-dev-qa-db-fra.com

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

Fondamentalement, mon code conserve actuellement quelques-unes des divs que j'ai sur mon site Web, puis lorsque vous cliquez sur un lien, il fait apparaître les divs.

J'ai besoin d'aide pour que pour que lorsque je clique sur un lien et qu'un div apparaisse et que je clique sur un autre lien, le précédent disparaisse.

Alors disons que je clique sur le lien "À propos", la div apparaît, c'est bien. Ensuite, je clique sur "Aide" et cette div apparaît juste SUR "À propos", ce 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, en voici un exemple sur 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;
}

MISE À JOUR:

Désolé, je devrais en dire plus. J'ai besoin de pouvoir cliquer sur un premier lien et lui faire afficher une boîte de texte.

puis cliquez sur un deuxième lien qui masquera la zone de texte associée au premier lien et en affichera un nouveau associé au deuxième lien.

Voici 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;}
javascripthtmlhide
14
Megatoaster

Vous pouvez faire comme ça, si vous voulez afficher et masquer une div particulière en cliquant sur le 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>

PDATE: Passez l'autre div id que vous souhaitez faire disparaître en cliquant sur div one. 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>
9
Suman Bogati

Je ne comprends pas bien votre question. Mais si vous essayez de rendre différents éléments div visibles en cliquant sur différents liens, voici 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();
       });
});

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

4
Smrita