Crear cuenta<!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><span class='linux'>Linux</span></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>
No hay comentarios