Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pulao

link aparece e desaparece

Por , em Javascript

Recommended Posts

pulao    0

pulao
Postado

bom dia estou tendo uma duvida que é a seguinte quero fazer algo do tipo, quando eu clicar em um link apareça um div e caso clique em outro link apareça outro div, sao apenas duas opções. Eu tenho um que a imagem fica visivel ao passar o mouse sobre o link e desaparece apenas passando o mouse novamente sobre o link

 

caso possam me ajudar

o que tenho ate agora é esse

<html>
   <head>
       <script type="text/javascript">
       function mediv() {
           var div = document.getElementById('div');
           if(div.style.display == 'none') {
               div.style.display = 'block';
           }
           else {
               div.style.display = 'none';
           }
       }
       </script>
   </head>
   <body>
       <a href="#" onmouseover="mediv()">Mostrar</a>
       <div id="div" style="border: 2px solid #000; display: none; height: 100px; width: 100px;"></div>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ficou meio confuso por causa das 2 frases.. por partes:

 

        function mediv( id_div ) {
           var div = document.getElementById( id_div );

assim:

 <a href="#" onmouseover="mediv( 'div' )">Mostrar</a>

e para o outro link:

 <a href="#" onmouseover="mediv( 'div2' )">Mostrar</a>

 

então, para este, você terá a div id="div2", e assim por diante.

Com isso, o teu 'Mostrar', será capaz de exibir a DIV que precisa corretamente.

 

Depois disso, você só precisa 'esconder' as outras.

Uma forma de resolver isso, parte do mesmo principio do 'menu em abas':

exemplo: http://www.wbruno.com.br/blog/2011/03/12/principio-de-menu-em-abas/

 

veja que aproveitei o href para passar o ID que deveria ser aberto.

Explique a segunda parte da dúvida, pois não compreendi.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

? não entendi a relação disso, com oque você pediu.

 

Leu oque eu escrevi ? viu o código que postei no blog ?

qual a dúvida ?

 

 

Eu tenho um que a imagem fica visivel ao passar o mouse sobre o link e desaparece apenas passando o mouse novamente sobre o link

agora acho que entendi esse trecho.

 

pesquise por tooltip

Compartilhar este post

Link para o post
Compartilhar em outros sites

pulao    0

pulao
Postado

o caso é o seguinte, no exemplo que eu coloquei o cara passa o mouse sobre o link e aparece a imagem, eu queria fazer algo do tipo que em uma mesma tela existiria dois links um que aparece padrao ao abrir a tela e outro caso eu quisesse filtar mais dados exemplo...

 

<a href="link_simples">  <a href="link_avancado">

 

os dados do link simples ja aparecem na tela mesmo sem clicar nele, caso eu queira uma pesquisa melhor eu clico em link avancçado e os dados aparecem no lugar dos dados do link simples... no caso dados seria algus inputs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

os dados do link simples ja aparecem na tela mesmo sem clicar nele,

procure sobre tooltip

 

caso eu queira uma pesquisa melhor eu clico em link avancçado e os dados aparecem no lugar do link simples... no caso dados seria algus inputs...

com o código que postei, resolve essa situação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pulao    0

pulao
Postado

dessa forma ta bem legal ja, a unica coisa que preciso saber é como um dos links desaparece caso o outro estiver aparecendo, ou senao o conteudo aparecer so quando o link for clicado...

mas vlw pela força...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

desaparece, pq antes de mostrar um, eu escondo todos

 

o código faz exatamente oque você precisa.. e da forma que você quer.

 

leia os comentários:

                as[i].onclick = function( e ){//atrelo o evento ao elemento
                        hide_all(); //aqui escondo todos
                        var id_el = this.href.split('#');//descubro o ID que devo abrir
                       
                        id( id_el[1] ).style.display = 'block';//abro oque foi clicado         
                        return disablelink( e );//não deixo o comportamento default da tag ser executado
                }

Compartilhar este post

Link para o post
Compartilhar em outros sites

pulao    0

pulao
Postado

meu codigo ta dessa forma ate agora e ta quase la as vezes uma dica cairia bem

no caso vai aparecer e desaparecer o div ao clicar num link

o que eu preciso agora é o seguinte, qdo ainda nao ter clicado deve aparecer uma tabela avançada com mais opções ja que a simple esta aparecendo como padrao segue o codigo

 

function mediv() {
           var div = document.getElementById('div');
           if(div.style.display == 'none') {
               div.style.display = 'block';
           }
           else {
               div.style.display = 'none';
           }
       }
     as[i].onclick = function( e ){
                       hide_all();
                       var id_el = this.href.split('#');
                       id( id_el[1] ).style.display = 'block';
                       return disablelink( e );
               }
</script>

<center><a href="#" onclick="mediv()">Mostrar</a>


<div id="div">
<center>
   <table>
      <form action=busca.php method=POST>
  <tr>
 <th style='background-color:#5F9EA0;' colspan=3><font face=verdana size=3 color=white> Busca Simples </font></th></tr>
  <td style='background-color:#5F9EA0;'><font face=verdana size=2 color=white><b>Titulo:<input type=text name=titulo class="campos"></td>
  <td style='background-color:#5F9EA0;'><font face=verdana size=2 color=white><b>Autor:<input type=text name=autor class="campos"></td>
   <td style='background-color:#5F9EA0;'><font face=verdana size=2 color=white><b>Editora:<input type=text name=autor class="campos"></td>
    <tr>
    <th style='background-color:#5F9EA0;' colspan=3> <input name=submit id=submit type=submit value=Pesquisar name=busca class="botaosub"></th>
    </tr>
   </form>
  </tr>
</center>
</table>
</div>

o que eu preciso agora e uma opção que faça essa sumir e outra com as opções avançadas aparecer

desde ja agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito