Show and hide program in JavaScript

Question

Show and hide program in JavaScript

Navigation

#1 by (4 votes)
#2 by (3 votes)

1

My goal is to make a program that has a list, and each time the mouse goes over the name of that list, it shows a content of a div , but then using that code here, I created a vector for each list item but can not get it to show. Can anyone show the error or solution?

<blink>
<html>
<body>
<script type="text/javascript">  
function mostra()
 {
   var arraypilotes=["1","2","3"];
   document.getElementById('arraypilotes[i]').style.display = 'block';  
}  

function esconde()
 { 
    var arraypilotes=["1","2","3"];
    document.getElementById('arraypilotes[i]').style.display = 'none';  
}  
</script>

<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste</a>  
<div id="arraypilotes[0]" style="display:none;">Conteudo da DIV</div> 
<br/>
<br/>
<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste2</a>  
<div id="arraypilotes[1]" style="display:none;">Conteudo da DIV</div>   
<br/>
<br/>
<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste3</a>  
<div id="arraypilotes[2]" style="display:none;">Conteudo da DIV</div>   
</body>
</html>
</blink>

javascript

asked by anonymous 20.05.2015 / 14:10

2 answers

4

How about just using CSS?

div { display: none }

a:hover + div {
  display: block
}

<a href='#!'>Mostrar conteúdo do div 1</a>
<div> conteúdo do div 1</div>

<a href='#!'>Mostrar conteúdo do div 2</a>
<div> conteúdo do div 2</div>

20.05.2015 / 14:35

Return to beginning of condition when requested How to add titles above input and textarea?

score 3 · Accepted Answer

By simplifying your code, pass the id of your div to the parameter of the mostra and esconde methods.

    <html>
    <!DOCTYPE html>
    <html>
    <body>
        <script type="text/javascript">
            function mostra(idDiv) {
                document.getElementById(idDiv).style.display = 'block';
            }

            function esconde(idDiv) {
                document.getElementById(idDiv).style.display = 'none';
            }
        </script>

        <a href="#" onmouseover="javascript:mostra('div0');" onmouseout="esconde('div0');">Teste</a>
        <div id="div0" style="display: none;">Conteudo da DIV</div>
        <br />
        <br />
        <a href="#" onmouseover="javascript:mostra('div1');" onmouseout="esconde('div1');">Teste2</a>
        <div id="div1" style="display: none;">Conteudo da DIV</div>
        <br />
        <br />
        <a href="#" onmouseover="javascript:mostra('div2');" onmouseout="esconde('div2');">Teste3</a>
        <div id="div2" style="display: none;">Conteudo da DIV</div>
    </body>
    </html>