Código de JQuery - Mostrar parte de un texto resaltado según selección

Imágen de perfil

Mostrar parte de un texto resaltado según seleccióngráfica de visualizaciones


JQuery

Publicado el 29 de Julio del 2014 por Xavi
1.191 visualizaciones desde el 29 de Julio del 2014. Una media de 14 por semana
Código que muestra como resaltar unas palabras de un texto dado según una selección estipulada. Para ello, se añaden y quitan estilos con jquery.

Versión 1

Publicado el 29 de Julio del 2014gráfica de visualizaciones de la versión: Versión 1
1.192 visualizaciones desde el 29 de Julio del 2014. Una media de 14 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    function marcar(clase)
    {
		// Eliminamos cualquier seleccion anterior
		$("#texto span").removeClass("selected");
		// Creamos la nueva seleccion
		$("."+clase).addClass("selected");
    }
    </script>
 
	<style>
	#texto {color:#777;}
	.selected {background-color:yellow;}
	ul li a {color:blue;}
	</style>
</head>
 
<body>
 
<h1>Mostrar parte de un texto resaltado segun selección</h1>
 
<p>Aqui se muestra como resaltar parte de un texto de nuestra web, segun una selección dada. Para ello, se utiliza jquery para añadir una clase a la clase indicada.</p>
<p>El texto, contiene una clase dada: <b>&lt;span class='linux'&gt;Linux&lt;/span&gt;</b>
<br>Cuando seleccionamos el link "remacarcar linux", añadimos mediante jquery una clase que tiene el resaltado: <b>$(".linux").addClass("selected");</b>
</p>
 
<ul>
	<li><a href="#" onclick="marcar('linux')">remarcar linux</a></li>
	<li><a href="#" onclick="marcar('gnu')">remarcar gnu</a></li>
	<li><a href="#" onclick="marcar('gpl')">remarcar gpl</a></li>
	<li><a href="#" onclick="marcar('licencia')">remarcar licencias</a></li>
</ul>
 
<p>Este texto es copiado de la wikipedia para el ejemplo</p>
<p id="texto"><span class='linux'>GNU/Linux</span> es uno de los términos empleados para referirse a la combinación del núcleo o kernel libre similar a Unix denominado <span class='linux'>Linux</span> con el sistema <span class='licencia gnu'>GNU</span>. Su desarrollo es uno de los ejemplos más prominentes de software libre; todo su código fuente puede ser utilizado, modificado y redistribuido libremente por cualquiera bajo los términos de la <span class='licencia gpl'>GPL</span> (Licencia Pública General de <span class='licencia gnu'>GNU</span>, en inglés: General Public License) y otra serie de licencias libres.</p>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2727