Bonaval Multimedia

Modificar aspecto de un enlace HTML filtrando por su HREF con jQuery

MENU

  • Inicio
  • Empresa
    • Quienes somos
    • Noticias
    • KB: Blog IT
  • Soluciones
    • Nuestras soluciones
    • Aplicaciones a medida
    • Soluciones web para la alimentación y congelado
    • Soluciones web para el turismo y los hoteles
    • Comercio on line
    • Movilidad: webs y apps
    • Sistemas GIS
    • Media: Vídeo Streamer, DVD
    • SEO - Posicionamiento en buscadores
    • Diseño y desarrollo web en Joomla CMS
    • Sistemas Expertos: Audiencias TV
  • Servicios
    • Qué ofrecemos
    • Alojamiento Simple y Avanzado
    • Servidor Virtual
    • Atención al cliente
  • Contacto

Modificar aspecto de un enlace HTML filtrando por su HREF con jQuery

En ocasiones podemos querer cambiar el aspecto de un enlace u ocultarlo a la vista según su destino (HREF) Con jQuery podemos hacerlo:


Supongamos que tenemos el siguiente HTML
<ul class="itemTags">
  <li><a href="/...enlace1/tag/DESTACADO">enlace 1 destacado/</a></li>
  <li><a href="/...enlace2/tag/DESTACADO/">enlace 2 destacado</a></li>
<li><a href="/...enlace3/tag/OCULTO/">enlace 3 oculto</a></li>
  <li><a href="#">enlace 4</a></li>
  <li><a href="#">enlace 5</a></li>
</ul>
Con el siguiente script de jQuery podemos ocultar los enlaces que contienen en su HREF "/OCULTO" y podemos destacar los que continen "tag/DESTACADO"
<script>
$(document).ready(function() {
$( 'ul.itemTags li a[href*="/tag/OCULTO"]' ).each(function() {$( this).parent().css( "display","none" ); }); // modifica el elemento "li"
$( 'ul.itemTags li a[href*="/tag/DESTACADO"]' ).each(function() {$(this).css( { "background-color":"green","color":"white" } ); }); // Modifica el elemento "a"
});
</script>
Detalles
Categoría: Desarrollo web
Publicado: 26 Febrero 2018
 
  • Aviso legal
  • Noticias
  • File Store
  • KB
  • Kit Digital
  • Polícita de Privacidad
  • Política de cookies