active de links de menu com iframe

[Thiago Luna 0]

Olá pessoal.

Estou com uma dúvida:

 

Como altenar a cor dos itens de menu somente quando eles são clicados?

Utilizando css, tenho a propriedade a:visited, porém quero que apenas o item de menu clicado mude de cor e não todos os que já foram clicados.

 

Abaixo, código bem simples de como monto o menu com os links e o target para abrir no iframe.

 

Exemplo do que preciso:

- Clico em Grupo e este item fica vermelho.

- Clico em Unidade e agora este fica vermelho e o Grupo fica da cor dos outros, ou seja, preto.

 

<div style="width: 180px; height: 300px;">
<div title="Cadastro" style="margin: 0pt; padding: 0pt; overflow: hidden;">
	<h4 class="section">Cadastro</h4>
	<ul class="menu">
		<li><a href="www.google.com.br" target="iframe">Grupo</a></li>
		<li><a href="http://www.yahoo.com.br" target="iframe">Subgrupo</a></li>
		<li><a href="http://www.gmail.com.br" target="iframe">Unidade</a></li>
		<li><a href="http://www.hotmail.com.br" target="iframe">Material</a></li>
	</ul>
</div>

<div title="Movimentação" style="margin: 0pt; padding: 0pt; overflow: hidden;">
	<h4 class="section">Movimentação</h4>
	<ul class="menu">
		<li>Entrada</li>
		<li>Saída</li>
		<li>Estorno</li>
		<li>Pedidos</li>
	</ul>
</div>
</div>

<div style="position: absolute; top:10px; left:310px; width:300px; height:600px; background-color:#ff9900; border:1px solid black;">
<iframe src="start.html" align="center" name="iframe" frameborder=0 marginwidth=0 marginheight=0 width=500 height=100% scrollinglist="yes"></iframe>
</div>

 

Vlw!

[Diéssica 140]

Oi Thiago!

 

Agora entendi o seu problema.

 

Você pode dar uma ID para cada LI e usar a mesma função que ensinei nesse tópico:

http://forum.imasters.com.br/topic/449604-active-de-links-sem-sair-da-pagina/page__p__1777861#entry1777861

 

Que identificamos individualmente o elemento e damos a função à ele.

Este é o seu código:

               <ul class="menu">
                       <li><a href="www.google.com.br" target="iframe">Grupo</a></li>
                       <li><a href="http://www.yahoo.com.br" target="iframe">Subgrupo</a></li>
                       <li><a href="http://www.gmail.com.br" target="iframe">Unidade</a></li>
                       <li><a href="http://www.hotmail.com.br" target="iframe">Material</a></li>
               </ul>

 

Agora, vou usar como exemplo a primeira LI (li grupo), dando a id "grupo" pra ela.

<li id="grupo"><a href="www.google.com.br" target="iframe">Grupo</a></li>

 

No CSS, vou determinar que quero este link/item do menu PRETO (#000000) ao visitá-lo (a:visited).

li#grupo a:visited {
       color: #000000;
}

 

Pronto. Agora é só determinar esse "style" na página em que há o LI com a id GRUPO.

 

EXEMPLO FINAL

 

HTML:

                       <li id="grupo"><a href="www.google.com.br" target="iframe">Grupo</a></li>
                       <li id="subgrupo"><a href="http://www.yahoo.com.br" target="iframe">Subgrupo</a></li>

 

CSS (Link grupo ao clicar: preto - Link subgrupo ao clicar: vermelho):

li#grupo a:visited {
       color: #000000;
}

li#subgrupo a:visited {
       color: #FF0000;
}

 

RESULTADO FINAL

http://www.diessicagurskas.com/exemplo/link_visitado.html

 

 

Qualquer coisa, pode perguntar.

 

[]s,

Diéssica Gurskas