Insérer un lien en utilisant CSS

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

  •  03-07-2019
  •  | 
  •  

Question

Je tiens à la main un document HTML et je cherche un moyen d'insérer automatiquement un lien autour du texte dans un tableau. Permettez-moi d'illustrer: 

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

Je voudrais créer automatiquement chaque texte d'un TD avec la classe & "case &"; un lien vers ce cas dans notre système de suivi des bogues (ce qui, incidemment, est FogBugz).

Je voudrais donc que " 123456 " être changé en un lien de cette forme: 

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

Est-ce possible? J'ai joué avec les pseudo-éléments: before et: after, mais il ne semble pas y avoir de moyen de répéter le numéro de cas.

Était-ce utile?

La solution

Pas de manière à fonctionner avec tous les navigateurs. Vous pouvez toutefois le faire avec des scripts Javascript relativement triviaux. 

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

Vous pouvez l'appliquer avec quelque chose comme onload = makeCasesClickable, ou simplement l'inclure à la fin de la page.

Autres conseils

voici une solution jQuery spécifique à votre code HTML publié: 

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

Essentiellement, sur chaque élément .case, le contenu de l'élément sera capturé et jeté dans un lien qui l'entoure.

Ce n’est pas possible avec CSS, et ce n’est en aucun cas ce que CSS est. Javascript côté client ou côté serveur (insérer la langue de votre choix) est la voie à suivre.

Je ne pense pas que ce soit possible avec CSS. CSS est uniquement censé affecter l'apparence et la présentation de votre contenu.

Cela semble être un travail pour un script PHP (ou un autre langage). Vous n’avez pas donné assez d’informations pour que je sache la meilleure façon de le faire, mais peut-être quelque chose comme ceci: 

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

Puis plus tard dans votre document: 

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

Et si vous voulez un fichier .html, exécutez le script à partir de la ligne de commande et redirigez la sortie vers un fichier .html.

Vous pourriez avoir quelque chose comme ça (en utilisant Javascript). Dans <head>, avez 

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

Et puis à la fin de <body> 

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

Je l'ai testé et cela fonctionne bien.

Je sais que c’est une vieille question, mais j’ai trébuché sur ce post à la recherche d’une solution pour créer des hyperliens en utilisant CSS et ai fini par créer le mien. Cela pourrait intéresser quelqu'un qui trébuche comme moi:

Voici une fonction php appelée 'linker ();' qui active un faux attribut CSS

  

connect: 'url.com';

pour un élément défini #id. laissez simplement le php appeler cela sur chaque élément de HTML que vous jugez digne d'un lien. les entrées sont le fichier .css sous forme de chaîne , en utilisant:

  

$ style_cont = fichier_get_contents ($ style_path);

et le #id de l'élément correspondant. Voici le tout: 

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

cela pourrait probablement être amélioré / raccourci en utilisant des commandes telles que .wrap () ou getelementbyID () car il ne génère que la portion <a href='blah'>, mais comme </a> disparaît de toute façon sans clause d’ouverture, cela fonctionne quand même si vous les ajoutez partout: D

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top