Ir para conteúdo

POWERED BY:

Arquivado

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

Douglas Fernandess

Menu e Sub Menus Exibir e Ocultar Links

Por , em Javascript

Recommended Posts

Douglas Fernandess    2

Douglas Fernandess
Postado

Queria fazer o seguinte

 

Ex:

Alimentação

- Bebidas:

- Sucos

- Vinícolas

- Tele-Entrega de Água

- Tele-Entrega de Cerveja, Chopp e Outros

- Restaurantes

- Padarias e Confeitarias

- Pastelaria

- Pizzaria

 

Animais:

˪ Adestramento

˪ Canil

˪ Hotel

˪ Pet shop

˪ Veterinario

˪ Outros

 

Automóveis

˪ Aluguel

˪ Autopeças e oficinas

˪ Pintura e Funilaria

˪ Serviços de mudanças

˪ Táxi

˪ Transportes de valores

˪ Vendas – Concessionárias:

˪ Carros

˪ Caminhões

˪ De coleção

˪ Motos

˪ Náutica

˪ Ônibus

˪ Outros

˪ Outros

 

Bem Estar:

˪ Academias

˪ Aulas e cursos

˪ Equipamento esportivo

˪ Espaço Vida Saudável – Herbalife:

˪ Busca por cidades

˪ Massagem

˪ Personal Trainner

˪ Pilates

˪ Spas

˪ Outros

 

Mais o menos isso com o recurso exibir quando clicado e ocultar quando fosse clicado em outro

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o principio é este aqui:

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

basta adaptar o exemplo q mostrei. =)

 

não vou fazer pra ti.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

postei o link ali em cima, mostrando "o caminho".

 

só ler o código e tentar. Apresente a sua tentativa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Fernandess    2

Douglas Fernandess
Postado

Bom com base no seu exemplo não coloquei muitas categorias para não ficar muito ruim de achar o erro, mais mesmo assim não deu certo kkk

 

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function hide_all(){
        var divs = id('content').getElementsByTagName('div');
        for( var i=0; i<divs.length; i++ )
        {
                divs[i].style.display = 'none';
        }
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
        var evt = window.event || e
        if (evt.preventDefault) //supports preventDefault?
                evt.preventDefault()
        else //IE browser
                return false
}
window.onload = function(){
        hide_all();
        var as = id('content').getElementsByTagName('a');
        for( var i=0; i<as.length; i++ )
        {
                as[i].onclick = function( e ){
                        hide_all();
                        var id_el = this.href.split('#')
                       
                        id( id_el[1] ).style.display = 'block';                
                        return disablelink( e );
                }
        }
}
</script>
</head>
<body>
        <div id="content">
                <a href="#alimentacao">Alimentação</a><br />
                <div id="alimentacao"><a href="#bebidas">Bebidas</a><br /></div>
			 <div id="bebidas">Sucos</div>
                <div id="bebidas">Vinícolas </div>
                <div id="bebidas">Tele-Entrega de Água</div>
                <div id="bebidas">Tele-Entrega de Cerveja, Chopp e Outros</div>


                <a href="#geografia">Animais</a><br />
                <div id="geografia">Conteudo da Geografia</div>
               
                <a href="#matematica">Automóveis</a><br />
                <div id="matematica">Conteudo da Matemática</div>

        </div><!-- /content -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

E qual a sua dúvida ?

 

funcionou como esperado aqui.

Clica/abre.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso é por causa do html.

 

Deveria ser assim:

 

 
<a href="#bebidas">Bebidas</a><br />
<div id="bebidas">
               <p>Sucos</p>
               <p>Vinícolas </p>
               <p>Tele-Entrega de Água</p>
               <p>Tele-Entrega de Cerveja, Chopp e Outros</p>
</div>

entendeu como funciona ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Fernandess    2

Douglas Fernandess
Postado

hum entendi quando eu chegar em casa irei implementar! valeu ai fera ;)

 

Se tirar o conjunto do código funciona, mais preciso aplicar bem mais condições com mais categorias, se alguém puder me da uma mão aí

 

 

<html>

<i><script>

function cat(tipo){

if(tipo=="alimentacao"){

document.getElementById("alimentacao").style.display = "inline";
document.getElementById("animais").style.display = "none";
document.getElementById("automoveis").style.display = "none";

}else if(tipo=="animais"){

document.getElementById("alimentacao").style.display = "none";
document.getElementById("animais").style.display = "inline";
document.getElementById("automoveis").style.display = "inline";

}

}else if(tipo=="automoveis"){

document.getElementById("alimentacao").style.display = "inline";
document.getElementById("animais").style.display = "none";
document.getElementById("automoveis").style.display = "inline";

}

}

</script>

<select onclick="cat(this.value)">
<option value="alimentacao">Alimentação</option>
<option value="animais">Animais</option>
<option value="automoveis">Automóveis</option>
</select> <br><br>



<div id="alimentacao" style="display:none;">

			<select name="area" id="area">

    			      <option value="">Selecione a área</option>
                     <option value="bebidas" id="bebidas">Bebidas</option>
                     <option value="restaurantes" id="restaurantes">Restaurantes</option>
                     <option value="padarias" id="padarias">Padarias e Confeitarias</option>  
                     <option value="pastelaria" id="pastelaria">Pastelaria</option>
                     <option value="pizzaria" id="pizzaria">Pizzaria</option>


                  </select>


</div>

<div id="animais" style="display:none;">


<select name="area" id="area">

    			      <option value="">Selecione a área</option>
                     <option value="adestramento" id="Adestramento">Adestramento</option>
                     <option value="canil" id="Canil">Canil</option>
                     <option value="hotel" id="Hotel">Hotel</option>  
                     <option value="pet-shop" id="pet-shop">Pet shop</option>
                     <option value="veterinario" id="veterinario">Veterinario</option>
				  <option value="outros" id="outros">Outros</option>


                  </select>


</div>

<div id="automoveis" style="display:none;">


<select name="area" id="area">

    			      <option value="">Selecione a área</option>
                     <option value="aluguel" id="aluguel">Aluguel</option>
                     <option value="autopecas" id="autopecas">Autopeças e oficinas</option>
                     <option value="servicos-de-mudancas" id="servicos-de-mudancas">Serviços de mudanças</option>  
                     <option value="taxi" id="taxi">Táxi</option>
                     <option value="transportes-de-valores" id="transportes-de-valores">Transportes de valores</option>
				  <option value="vendas–concessionarias" id="vendas–concessionarias">Vendas – Concessionárias</option>


                  </select>


</div>






</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Amigo, nesse caso ai, veja esse exemplo:

 

http://wbruno.com.br/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

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