Inserisci un collegamento usando CSS

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

  •  03-07-2019
  •  | 
  •  

Domanda

Sto gestendo a mano un documento HTML e sto cercando un modo per inserire automaticamente un collegamento attorno al testo in una tabella. Permettetemi di illustrare: 

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

Vorrei fare automaticamente ogni testo in un TD con classe " case " un link a quel caso nel nostro sistema di tracciamento dei bug (che, per inciso, è FogBugz).

Quindi mi piacerebbe che " 123456 " da modificare in un link di questo modulo: 

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

È possibile? Ho giocato con gli pseudo-elementi: before e: after, ma non sembra esserci un modo per ripetere il numero del caso.

È stato utile?

Soluzione

Non in un modo che funzioni su tutti i browser. Tuttavia, potresti farlo con un Javascript relativamente banale .. 

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)
    }
}

Puoi applicarlo con qualcosa come onload = makeCasesClickable o semplicemente includerlo alla fine della pagina.

Altri suggerimenti

ecco una jQuery specifica per il tuo HTML pubblicato: 

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

in sostanza, sopra ogni elemento .case, afferrerà il contenuto dell'elemento e li getterà in un collegamento avvolto attorno ad esso.

Non è possibile con CSS, inoltre non è ciò che CSS è in alcun modo. Javascript lato client o lato server (inserire la lingua scelta) è la strada da percorrere.

Non credo sia possibile con i CSS. Si suppone che i CSS influenzino solo l'aspetto e il layout dei tuoi contenuti.

Sembra un lavoro per uno script PHP (o qualche altra lingua). Non mi hai dato abbastanza informazioni per farmi conoscere il modo migliore per farlo, ma forse qualcosa del genere: 

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

Quindi più avanti nel tuo documento: 

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

E se vuoi un file .html, esegui semplicemente lo script dalla riga di comando e reindirizza l'output su un file .html.

Potresti avere qualcosa del genere (usando Javascript). All'interno di <head>, hai 

<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>

E poi alla fine di <body> 

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

L'ho provato e funziona benissimo.

So che questa è una vecchia domanda, ma mi sono imbattuto in questo post alla ricerca di una soluzione per creare collegamenti ipertestuali utilizzando CSS e ho finito per crearne uno mio, potrebbe essere di interesse per qualcuno che si imbatte in questa domanda come ho fatto io:

Ecco una funzione php chiamata 'linker ();' che abilita un falso attributo CSS

  

connect: 'url.com';

per un elemento definito #id. lascia che php lo chiami su ogni elemento di HTML che ritieni degno di collegamento. gli input sono il file .css come stringa , usando:

  

$ style_cont = file_get_contents ($ style_path);

e il #id dell'elemento corrispondente. Ecco tutto: 

    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">';
            };
        };
    };
};

questo potrebbe probabilmente essere migliorato / abbreviato usando comandi come .wrap () o getelementbyID () perché genera solo la parte <a href='blah'>, ma visto che </a> scompare comunque senza una clausola di apertura, funziona comunque se le aggiungi semplicemente ovunque: D

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top