Link em DIV oculta

[Ricardo Salim_181131 0]

Olá galera do forum, beleza?
Essa é a minha primeira postagem, então me desculpem se eu postar ou escrever algo errado.

Vamos a minha dúvida então.
Eu estou desenvolvendo um site aqui para uma empresa de Engenharia.
Tenho uma página chamada Clientes e nela, aparecem todos os clientes da empresa.
Só que assim, para cada tipo de cliente, aparece uma lista dentro de uma div escondida.
HTML:

<li><a href="#varejo" onclick="exibe1('varejo')";>Varejo</a></li>
<div id="varejo" style="display:none;">
<ul>
<li>Assai Atacadista</li>
<li>Ricoy Supermercados</li>
<li>Krill Supermercados</li>
<li>Comercial Chama</li>
<li>Supermercados Pedreira</li>
<li>Dia%</li>
<li>Extra Supermercado</li><br>
</ul>
</div>

 

JS:

function exibe1(varejo) {
document.getElementById('varejo').style.display="block";
document.getElementById('comercial').style.display="none";
document.getElementById('industrial').style.display="none";
document.getElementById('restaurantes').style.display="none";
document.getElementById('educacional').style.display="none";
document.getElementById('hospitalar').style.display="none";
document.getElementById('logistica').style.display="none";
}

 

 

Essa parte de esconder e aparecer a div dentro da página Clientes está funcionando perfeitamente.
O problema e a dúvida está no seguinte caso.
Eu tenho a página Home, dentro dela eu tenho dois banners.
Nos banners eu queria clicar neles e ser direcionado para a página Clientes só que, com a div, no caso, a div #varejo aberta.

 

 

 

 

 

<div id="boxBanner">
<div id="banner1">
<ul style="list-style:none;">
<li> <p align="center"><a href="#"target="_self"><img src="_img/banner/ban_1.png"/></a></p> </li>
<li> <p align="center"><a href="#" target="_self"><img src="_img/banner/ban_2.png"/></a></p> </li>
</ul>
</div>
<div id="banner2">
<ul style="list-style:none;">
<li> <p align="center"><a href="#.html" target="_self"><img src="_img/banner/ban_1.png"/></a></p> </li>
<li> <p align="center"><a href="#.html" target="_self"><img src="_img/banner/ban_2.png"/></a></p> </li>
</ul>
</div>
</div>

 

Por exemplo, eu queria que no banner1, a hora que eu clicasse, ele redirecionasse para a página Clientes, mas com a div #varejo aberta e no banner2, com a div#industrial, por exemplo, aberta.
Como eu faria isso?

[Rhuan Gonzaga 2]

Voce colocando #varejo na url, não funciona ?

[Ricardo Salim_181131 0]

Eu tentei fazer isso Rhuan, mas não foi. :/ eu tentei até colocar o link inteiro. mas não foi.

[Marcos Xavier 189]

Com troggleClass do Jquery fica fácil

Coloque na pagina de Clientes o exemplo:

 

<style>
.esconde {
display:none;
}
</style>
<li ><a id="alterna" href="#" >Varejo</a></li>
<div id="varejo" >
<ul>
<li>Assai Atacadista</li>
<li>Ricoy Supermercados</li>
<li>Krill Supermercados</li>
<li>Comercial Chama</li>
<li>Supermercados Pedreira</li>
<li>Dia%</li>
<li>Extra Supermercado</li><br>
</ul>
</div>


<script>
$("#alterna").click(function() {
$("#varejo").toggleClass( "esconde", 1000 );
});
</script>

E na home

 

<div id="boxBanner">
   <div id="banner1">
    <ul style="list-style:none;">
    <li> <p align="center"><a href="cliente.htm"target="_self"><img src="_img/banner/ban_1.png"/></a></p> </li>
    <li> <p align="center"><a href="cliente.htm" target="_self"><img src="_img/banner/ban_2.png"/></a></p> </li>
    </ul>
    </div>
    <div id="banner2">
    <ul style="list-style:none;">
    <li> <p align="center"><a href="cliente.htm target="_self"><img src="_img/banner/ban_1.png"/></a></p> </li>
    <li> <p align="center"><a href="cliente.htm" target="_self"><img src="_img/banner/ban_2.png"/></a></p> </li>
    </ul>
    </div>
    </div>
		
//coloquei cliente.htm , altere conforme precisa			

[Ricardo Salim_181131 0]

Marcos, valeu por ter respondido, mas eu testei aqui e não deu certo. Ele, além de não ir pra página clientes, a div do varejo, fica aberta, coisa que eu não quero.

Alguma outra solução?

[Marcos Xavier 189]

Quanto a div varejo ficar aberta é só inverter o quadro.

No CSS da div varejo coloque:

 

#varejo{ display:none; }

E para mostrar

 

.esconde { display:block;//ou inline }

 

Perceba que coloquei

 

...<a href="cliente.htm"/>....

se não está indo para a página de clientes verifique o nome e se a extensão está htm ou html

[William Bruno 1501]

cara, uma forma é a seguinte:

<a href="clientes.html#varejo"target="_self"><img src="_img/banner/ban_1.png"/></a>

ai no teu js:

window.onload = function(){
    var hsh = document.location.hash.replace('#', '');

    if( hsh ){
        document.getElementById( hsh ).style.display = 'block';
    }
}

entendeu ?

 

Eu pego o hash da url, e mostro a div que tenha aquele hash.

 

 

 

@Marcos Xavier, o seu código não funciona, pq ele está trocando de página.

[Marcos Xavier 189]

Tem que importar o Jquery . Na página de clientes importe com

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

Senão não funfa mesmo.  No exemplo que passei a página será carregada com a div e para ocultar  deve-se clicar .

[Ricardo Salim_181131 0]

William Bruno... VALEU CARA! Resolveu meu problema..

só uma pergunta.. sabe me dizer pq só funciona se eu colocar o script JS direto na página?

Pq se eu tento colocar o script dentro do meu arquivo geral.js, o script não funciona.

[William Bruno 1501]

pode ser conflito com seus outros js, tem q analisar e ver oque é.

 

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/