Digamos que tengo una lista simple:
<ul>
<li class="notClicked">1</li>
<li class="notClicked">2</li>
<li class="notClicked">3</li>
</ul>
¿Puedo hacer clic en un "li" para cambiar los estilos de todos liexcepto en el que se hizo clic?
Entonces, si hago clic en "li" número 2, la lista se verá así:
<ul>
<li class="notClicked">1</li>
<li class="clicked">2</li>
<li class="notClicked">3</li>
</ul>
Entonces, si hago clic en el primer "li", entonces habrá hecho clic en la clase, mientras que otros no serán seleccionados.
En caso de que quieras jugar con él, aquí está jsbin: http://jsbin.com/ucuca4/edit
Hacer en Prototipo o JavaScript simple.
Solución del problema
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='Clicked';
Lst=obj;
}
/*]]>*/
</script>
<style>
.notClicked {color: black}
.Clicked {color: red}
</style>
</head>
<body>
<ul>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">1
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">2
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">3
</a>
</li>
</ul>
</body>
</html>
No hay comentarios.:
Publicar un comentario