Link em DIV oculta

[MrHyde_]

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?

[MarlonFerri]

O melhor que eu veja para a tua solicitação é usar a url como caminho. Deixe o caminho do link para um valor assim

#.html/?aberto=varejo

Através de um url = window.location retem o valor da url, usa url.toString() pra transormar em string e depois usa um split nela. assim terás o valor de qual tu quer aberta.

Podes usar um método diferente pra block e none. usa um AddClass(esconder) e addClass(mostrar) para controlar qual está sendo mostrada e qual div está escondida. Já no CSS prevê as duas classes que será feita a mudança quando adicionar ou remover uma classe da div.

Outra forma é usar um AJAX, jogando na tela somente a div que tu precisa, e recarregando o conteúdo conforme for modificando a escolha.

Espero ter ajudado!