mudar valores de style com JS

Tenho um codigo CSS aqui que cria pra mim abas (orelinhas), e eu to querendo fazer em JS uma funcao que quando o cara clica em uma aba, essa mesma fique marcada igual ao efeito OVER que ja tem....mas estou me quebrando!!! Não consigo fazer a funcao JS que muda apenas as opções do CSS (style) que deixei ela focada!!!

Se alguem puder me ajudar agradeco!

O codigo é o seguinte:

codigo CSS:

#tabs {
	float:left;
	width:100%;
	background:#FFF;
	font-size:93%;
	line-height:normal;
	height:25px;
}

#tabs ul {

	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
}

#tabs li {

	display:inline;
	margin:0;
	padding:0;
}

#tabs a {

	float:left;
	background:url("../imgs/abaEsquerda.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}

#tabs a span {

	float:left;
	display:block;
	background:url("../imgs/abaDireita.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#9F9584;
}

/ Commented Backslash Hack hides rule from IE5-Mac \/ #tabs a span {float:none;} / End IE5-Mac hack / #tabs a:hover span {

	color:#FFF;
}

#tabs a:hover {

	background-position:0% -42px;
}

#tabs a:hover span {

	background-position:100% -42px;
}

codigo HTML:

 <div id="tabs">
 <ul>
 <!-- CSS Tabs -->
 <li id="tab1"><a href="#" onclick="abas('1');"><span>Indentificação</span></a></li>
 <li id="tab2"><a href="#" onclick="abas('2');"><span>Documentos</span></a></li>
 <li id="tab3"><a href="#" onclick="abas('3');"><span>Endereços</span></a></li>
 <li id="tab4"><a href="#" onclick="abas('4');"><span>Outros</span></a></li>
 </ul>
 </div>