cambia las clases de una caja de texto con javascript

[eduardo_sandoya]

hola, mi problema es que tengo dos cajas de texto cada una de ellas tiene un menu lo q kiero es q cuando marco una me muestre un color y si marco la otra me mustre otro color, o si estan predterminado que los colores se intercambien al seleccionar uno de ellos.

[Alexis88]

Los estilos que desees aplicar a cualquier elemento del DOM, los puedes manipular mediante la siguiente sintaxis:

Código Javascript:

elemento.style.propiedad = valor;
 

Recuerda que si la propiedad en CSS tiene un guión a la mitad, por ejemplo font-size, debes de escribirla con el estilo camelCase, con lo que quedaría así: fontSize.

Saludos

[eduardo_sandoya]

este codigo es el tengo:
<script type="text/javascript" src="js/funciones.js">
</script>
<style type="text/css">
<!--
.Estilo1 {
color: #FFFFFF;
font-weight: bold;
font-size: 24px;
}
-->
</style>
<style>
.claseul{
margin:0px;
padding:0px;
padding-top:20px;
}
.claseul li{
list-style:none;
display:inline-block;
border:#000000 solid 1px;
padding:5px;
border-radius:10px 10px 0px 0px;
background:#ffc9c9;
color:#000000;
cursor:pointer;
}
.claseul2{
margin:0px;
padding:0px;
padding-top:20px;
}
.claseul2 li{
list-style:none;
display:inline-block;
border:#000000 solid 1px;
padding:5px;
border-radius:10px 10px 0px 0px;
cursor:pointer;
background:#FF9966;
color:#FFFFFF;
}
.pestabla{
border:#000000 solid 1px;
height:150px auto;
color:#000000;
background:#CCCCCC;
}
</style>
<link href="css/form-2.css" rel="stylesheet" type="text/css" />
<script>
function CambiarEstilo(id) {
var elemento = document.getElementById(id);
if (elemento.className == "claseul li") {
elemento.className = "claseul2 li";
}
else {
elemento.className = "claseul li";
}
}
</script>
<ul class="claseul" id="select">
<li onclick="javascript:tabs('tabw1');CambiarEstilo('s elect')">PRODUCTOS</li>
<li onclick="javascript:tabs('tabw2');CambiarEstilo('s elect')">DETALLES</li>
</ul>
<!--AQUI VA EL CONTENIDO DE LA PRIMERA TABLA-->
<div id="tabw1" class="pestabla">
<form name="producto" action="#" method="post">
<table width="679" border="0" class="formulario">
<tr>
<td width="91"><span>CODIGO

</span></td>
<td width="193"><input placeholder="Inngrese Codigo" name="codigo" size="25" /></td>
<td width="55">&nbsp;</td>
<td width="107"><span>MARCA</span></td>
<td width="209"><input placeholder="Ingrese Nombre" name="marca" size="25" /></td>

</tr>
<tr>
<td><span>NOMBRE</span></td>
<td><input placeholder="Ingrese Nombre" name="nombre" size="25" /></td>
<td>&nbsp;</td>
<td><span>CANTIDAD</span></td>
<td><input placeholder="Ingrese Cantidad" name="cantidad" size="25" /></td>
</tr>
<tr>
<td><span>SERIE</span></td>
<td><input placeholder="Inrese la serie" name="serie" size="25" /></td>
</tr>
</table>
</form>
</div>
<!--AQUI VA EL CONTENIDO DE LA SEGUNDA TABLA-->
<div id="tabw2" class="pestabla" style="display:none; height:175px">
<form name="detalle" action="#" method="post">
<table width="679" height="129" border="0" class="formulario">
<tr>
<td width="82" height="38"><span style="padding-top:5px;">DETALLE</span></td>
<td width="479" rowspan="3" valign="top">
<textarea style="height:95px; width:350px" name="contenido" placeholder="Acontinuacion detalle el producto que desea, ingresar"></textarea>
<td width="47" valign="top">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51">&nbsp;</td>
<td width="51"><img src="icono/update.png" style="vertical-align:central" /></td>
</tr>
<tr>
<td width="82" height="30">&nbsp;</td>
<td width="47">&nbsp;</td>
</tr>
<tr>
<td width="82">&nbsp;</td>
<td width="47">&nbsp;</td>
</tr>
</table>
</form>
</div>


y lo q kiero en q me ayudes en en q si la funcion esta vien, kiero q al seleccionar ya se PRODUCTO O DETALLE SE QUE MARCADO DE UN COLOR Y MARCAR EL OTRO SE CAMBIE DE COLOR EN ANTERIOR MARCADO Y EL NUEVO QUEDE MARCADA.
AYUDAME TENGO PRUEBA..