Estoy desarrollando un sitio web de Wordpress e instalé un tema. Algunos de los elementos no tienen la opción de agregar hipervínculos, por lo que estoy tratando de agregar hipervínculos o hacer que se pueda hacer clic en los bloques usando JS.
Quiero agregar hipervínculos a esos elementos li y el tema actualmente no lo admite.
Mi lógica:
<div class="col-lg-6 col-sm-6"> <ul class="cyber-item"> <li> <i class="bx bx-check"></i> abcd </li> <li> <i class="bx bx-check"></i> efgh </li> <li> <i class="bx bx-check"></i> Content Delivery Network </li> <li> <i class="bx bx-check"></i> 24/7 Hours services </li> </ul> </div>Hay algunas maneras de abordar esto. Si ya está utilizando jquery, puede consultar la documentación de la función .wrap() : https://api.jquery.com/wrap/
Si no está usando jquery, es lo suficientemente simple como para hacerlo con js simple. Primero deberá seleccionar todos los elementos <li> y luego recorrerlos y reemplazar los contenidos con sus etiquetas <a> uno por uno. Puede hacer esto modificando la propiedad innerHTML del elemento.
Diré que esto parece un problema extraño. Debe haber una manera de agregar enlaces a su contenido sin recurrir a este método. Y aún tendrá que resolver algunos otros problemas: ¿cómo sabrá dónde debe ir cada enlace, por ejemplo?
De todos modos, aquí hay un fragmento para que pueda ver el principio detrás de lo que preguntó:
const items = document.querySelectorAll('li') items.forEach((item) => { const children = item.innerHTML item.innerHTML='<a href="http://stackoverflow.com">' + children + '</a>' }) <div class="col-lg-6 col-sm-6"> <ul class="cyber-item"> <li> <i class="bx bx-check"></i> abcd </li> <li> <i class="bx bx-check"></i> efgh </li> <li> <i class="bx bx-check"></i> Content Delivery Network </li> <li> <i class="bx bx-check"></i> 24/7 Hours services </li> </ul> </div>