Program to show and hide in Javascript

Asked

Viewed 207 times

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 this code here, I created an array for each item on the list, but I can’t get it to show. Someone may show 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

  • onmouseover="javascript:mostra();" must be onmouseover="mostra();", the prefix javascript: should be used to run javascript on links <a>

2 answers

4

How about using CSS only? 

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>

  • You were faster ! :) +1

  • 1

    @Sergio learning from you :p

  • thanks good face other alternative solution!!

3


Simplifying your code pass your div id in the method parameter mostraand esconde.

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

  • thank you very much guy will help that so, same brigade

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.