Ir para conteúdo

POWERED BY:

Arquivado

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

igor.cardoso

[Resolvido] Menu de aba

Por , em Desenvolvimento frontend

Recommended Posts

igor.cardoso    0

igor.cardoso
Postado

Olá pessoal, estou desenvolvento um sistema para web, e vamos usar em algumas paginas um menu de abas e divs.

seria algo do tipo, tenho 5 processos que tem os mesmos campos.

o problema que estou enfrentando é que a indentificação da aba ativa fica na tag <li>

seria mais ou menus assim <li id="current">, a <li> que estiver com este ID tera um visual diferenciado.

 

quero saber de tem alguma forma de alterar isso sem atualizar a pagina, tipo como se fosse a:active.

segue os codigos html e css

 

CODE
<style type="text/css">

body {

background:#fff;

margin:0;

padding:0;

color:#000;

font:x-small/1.5em Georgia,Serif;

voice-family: "\"}\""; voice-family:inherit;

font-size:small;

} html>body {font-size:small;}

 

#header {

float:left;

width:100%;

background:#DAE0D2 url("bg.gif") repeat-x bottom;

font-size:93%;

line-height:normal;

}

#header ul {

margin:0;

padding:10px 10px 0;

list-style:none;

}

#header li {

float:left;

background:url("leftA.jpg") no-repeat left top;

margin:0;

padding:0 0 0 9px;

}

 

#header a {

float:left;

display:block;

background:url("rightA.jpg") no-repeat right top;

padding:6px 15px 4px 6px;

text-decoration:none;

font-weight:bold;

color:#765;

}

/* Commented Backslash Hack

hides rule from IE5-Mac \*/

#header a {float:none;}

/* End IE5-Mac hack */

#header a:hover {

color:#333;

}

#header #current {

background-image:url("left_onA.jpg");

}

#header #current a {

background-image:url("right_onA.jpg");

color:#333;

padding-bottom:5px;

}

</style>

CODE
<body>

 

<div id="header">

<ul>

<li><a href="#">Home</a></li>

<li id="current"><a href="#">News</a></li>

<li id="02"><a href="#">Produc</a></li>

<li><a href="#">About</a></li>

 

<li><a href="#">Contact</a></li>

</ul>

</div>

 

</body>

</html>

 

o que eu queria é algo do tipo <a href="#" onclick="document.getElementById('li1').id ='current'"> mas não funciona para a tag <li>

 

alguem tem uma luz ai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bem é por que já possui uma ID talvez seja melhor o uso de getElementsByTagName() e ao inves de ID=""

usar class=""

Na parte javascript(acaso opite por Class ao inves de ID) para navegadores estilo Opera, Firefox e Safari você deverá usar setAttribute() e no Ie deverá usar className=""

 

falow abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

igor.cardoso    0

igor.cardoso
Postado

Resolvido, vlw ai brother.

o codigo ficou da seguinte forma.

 

<li id="0" class=""><a href="#" onclick="mudaAba(0)">Produção1</a></li>

 

function mudaAba(id) {

var x = document.getElementsByTagName('LI');

x[id].className = 'current';

}

 

assim ja funciona, agora eu implementei uma maneira de quando alterar de uma para a outra elas se apagarem automaticamente, deixando somente a selecionada ativa.

 

<script language="javascript">
var idanterior;
function mudaAba(id) {	
	if(idanterior!=id){
 	var x = document.getElementsByTagName('LI');
 	x[id].className='current';
		if(idanterior!=null){
			x[idanterior].className='';
		}
	idanterior=id;
	}
}
</script>
obrigado pessoal. agora ja posso terminar meu menu. :D

Compartilhar este post

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

Informação importante

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

  Aceito