Insertar un enlace mediante CSS

Mantengo manualmente un documento HTML y estoy buscando una forma de insertar automáticamente un enlace alrededor del texto en una tabla. Permítanme ilustrar:Insertar un enlace mediante CSS

<table><tr><td class="case">123456</td></tr></table>

me gustaría hacer automáticamente cada texto en un TD con el "caso" de clase un enlace a ese caso en nuestro sistema de seguimiento de errores (que, por cierto, es FogBugz).

así que me gustaría que "123456" para cambiar a un enlace de esta forma:

<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>

¿Es posible? He jugado con los pseudo-elementos: before y: after, pero no parece haber una manera de repetir el número de caso.

Fuente

2008-10-02 Schof

¿Qué quiere decir automáticamente? Tendrá que ejecutar alguna aplicación sobre su HTML que lo convertirá a los resultados deseados. – azamsharp

No de forma que funcione en todos los navegadores. Se podría, sin embargo, hacer eso con un poco de Javascript relativamente trivial ..

function makeCasesClickable(){ 
    var cells = document.getElementsByTagName('td') 
    for (var i = 0, cell; cell = cells[i]; i++){ 
     if (cell.className != 'case') continue 
     var caseId = cell.innerHTML 
     cell.innerHTML = '' 
     var link = document.createElement('a') 
     link.href = 'http://bugs.example.com/fogbugz/default.php?' + caseId 
     link.appendChild(document.createTextNode(caseId)) 
     cell.appendChild(link) 
    } 
}

se puede aplicar con algo como onload = makeCasesClickable, o simplemente incluirlo justo al final de la página.

Fuente

2008-10-02 23:47:27 Dan

Tenga cuidado al envolver ciegamente esos contenidos TD en enlaces; los elementos a nivel de bloque pueden aparecer, y no son válidos dentro de las etiquetas A. Además, encontraría la tabla correcta y obtendría sus elementos secundarios y no solo recopilar todos los TD del documento. –

No es posible con CSS, además de que no es lo que CSS es de ninguna manera. El lado del cliente de Javascript o del lado del servidor (inserte el idioma de su elección) es el camino a seguir.

Fuente

2008-10-02 23:50:47 da5id

No creo que sea posible con CSS. Se supone que CSS solo afecta el aspecto y el diseño de tu contenido.

Parece un trabajo para un script PHP (u otro idioma). Usted no dio suficiente información para mí saber la mejor manera de hacerlo, pero tal vez algo como esto:

function case_link($id) { 
    return '<a href="http://bugs.example.com/fogbuz/default.php?' . $id . '">' . $id . '</a>'; 
}

Luego, más tarde en su documento:

<table><tr><td class="case"><?php echo case_link('123456'); ?></td></tr></table>

Y si quieres una. archivo html, simplemente ejecute el script desde la línea de comando y redirija el resultado a un archivo .html.

Fuente

2008-10-02 23:52:09

aquí es una solución específica para su jQuery HTML publicado:

$('.case').each(function() { 
    var link = $(this).html(); 
    $(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>'); 
});

en esencia, sobre cada elemento .Case, se agarra el contenido del elemento, y echarlos en un enlace envuelto alrededor de él.

Fuente

2008-10-03 00:03:26 Owen

Podría tener algo como esto (usando Javascript). Dentro <head>, tienen

<script type="text/javascript" language="javascript"> 
    function getElementsByClass (className) { 
    var all = document.all ? document.all : 
     document.getElementsByTagName('*'); 
    var elements = new Array(); 
    for (var i = 0; i < all.length; i++) 
     if (all[i].className == className) 
     elements[elements.length] = all[i]; 
    return elements; 
    } 

    function makeLinks(className, url) { 
    nodes = getElementsByClass(className); 
    for(var i = 0; i < nodes.length; i++) { 
     node = nodes[i]; 
     text = node.innerHTML 
     node.innerHTML = '<a href="' + url + text + '">' + text + '</a>'; 
    } 
    } 
</script>

Y luego, al final de <body>

<script type="text/javascript" language="javascript"> 
    makeLinks("case", "http://bugs.example.com/fogbugz/default.php?"); 
</script>

Lo he probado, y funciona bien.

Fuente

2008-10-03 00:06:56

-3

Sé que esto es una vieja pregunta, pero me encontré con este post en busca de una solución para la creación de hipervínculos usando CSS y terminó haciendo mi propia, podría ser de interés para alguien tropezarse con esta pregunta como lo hice:

Aquí es una función php llamado 'enlazador();' que permite un atributo CSS falsa

conectar: 'url.com';

de un artículo #id definido. simplemente dejar que la llamada php presente en cada artículo de HTML que considere dignos de enlace. las entradas son el archivo .css como una cadena, usando:

$ style_cont = file_get_contents ($ style_path);

y el id del elemento correspondiente. Aquí está todo el asunto:

function linker($style_cont, $id_html){ 

    if (strpos($style_cont,'connect:') !== false) { 

     $url; 
     $id_final; 
     $id_outer = '#'.$id_html; 
     $id_loc = strpos($style_cont,$id_outer);  

     $connect_loc = strpos($style_cont,'connect:', $id_loc); 

     $next_single_quote = stripos($style_cont,"'", $connect_loc); 
     $next_double_quote = stripos($style_cont,'"', $connect_loc); 

     if($connect_loc < $next_single_quote) 
     { 
      $link_start = $next_single_quote +1; 
      $last_single_quote = stripos($style_cont, "'", $link_start); 
      $link_end = $last_single_quote; 
      $link_size = $link_end - $link_start; 
      $url = substr($style_cont, $link_start, $link_size); 
     } 
     else 
     { 
      $link_start = $next_double_quote +1; 
      $last_double_quote = stripos($style_cont, '"', $link_start); 
      $link_end = $last_double_quote; 
      $link_size = $link_end - $link_start; 
      $url = substr($style_cont, $link_start, $link_size); //link! 
     } 

     $connect_loc_rev = (strlen($style_cont) - $connect_loc) * -1; 
     $id_start = strrpos($style_cont, '#', $connect_loc_rev); 
     $id_end = strpos($style_cont,'{', $id_start); 
     $id_size = $id_end - $id_start; 
     $id_raw = substr($style_cont, $id_start, $id_size); 
     $id_clean = rtrim($id_raw);        //id! 

     if (strpos($url,'http://') !== false) 
     { 
      $url_clean = $url; 
     } 
     else 
     { 
      $url_clean = 'http://'.$url; 
     }; 

     if($id_clean[0] == '#') 
     { 
      $id_final = $id_clean; 

      if($id_outer == $id_final) 
      { 
       echo '<a href="'; 
       echo $url_clean; 
       echo '" target="_blank">'; 
      }; 
     }; 
    }; 
};

esto probablemente podría mejorarse/acortados utilizando comandos como .Wrap() o GetElementByID() , ya que sólo genera la porción <a href='blah'>, pero ver como desaparece </a> todos modos sin una cláusula de apertura se todavía funciona si sólo añadirlos en todas partes: D

Fuente

2013-06-25 15:09:00 piethh

Respuesta

Cuestiones relacionadas