Insertar un enlace usando CSS

StackOverflow https://stackoverflow.com/questions/165082

  •  03-07-2019
  •  | 
  •  

Pregunta

Estoy manteniendo manualmente un documento HTML y estoy buscando una manera de insertar automáticamente un enlace alrededor del texto en una tabla.Permítanme ilustrar:

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

Me gustaría hacer que cada texto en un TD con la clase "caso" sea automáticamente un enlace a ese caso en nuestro sistema de seguimiento de errores (que, dicho sea de paso, es FogBugz).

Entonces me gustaría que "123456" se cambiara por un enlace de este formulario:

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

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

¿Fue útil?

Solución

No de una manera que funcione en todos los navegadores. Sin embargo, podría hacerlo con un 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)
    }
}

Puede aplicarlo con algo como onload = makeCasesClickable, o simplemente incluirlo justo al final de la página.

Otros consejos

aquí hay una jQuery solución específica para su 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, tomará el contenido del elemento y lo arrojará a un enlace que lo envuelva.

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

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

Esto parece un trabajo para un script PHP (o algún otro lenguaje). No me diste suficiente información para conocer 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 adelante en su documento: 

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

Y si desea un archivo .html, simplemente ejecute el script desde la línea de comandos y redirija la salida a un archivo .html.

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

<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 probé y funciona bien.

Sé que esta es una vieja pregunta, pero me topé con esta publicación buscando una solución para crear hipervínculos usando CSS y terminé haciendo la mía propia, podría ser de interés para alguien que se tope con esta pregunta como lo hice yo:

Aquí hay una función de PHP llamada 'linker();' que habilita un atributo CSS falso

conectar:'url.com';

para un elemento definido con #id.simplemente deje que php llame a esto en cada elemento de HTML que considere digno de enlace.las entradas son el archivo .css como una cuerda, usando:

$style_cont = file_get_contents($style_path);

y el #id del artículo correspondiente.Aquí está todo:

    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/acortarse usando comandos como .wrap () o getElementById () porque solo genera el <a href='blah'> porción, pero viendo como </a> desaparece de todos modos sin una cláusula de apertura, todavía funciona si simplemente las agregas en todas partes :D

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top