Insérer un lien à l'aide de CSS

Je maintiens manuellement un document HTML et je cherche un moyen d'insérer automatiquement un lien autour du texte dans une table. Permettez-moi d'illustrer:Insérer un lien à l'aide de CSS

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

Je voudrais faire automatiquement tous les textes dans un TD avec classe « cas » un lien vers ce cas dans notre système de suivi des bogues (qui, soit dit en passant, est FogBugz).

donc je voudrais que « 123456 » à modifier 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.

Source

2008-10-02 Schof

Que voulez-vous dire automatiquement? Vous aurez besoin d'exécuter une application sur votre HTML qui va le convertir aux résultats souhaités. – azamsharp

D'une manière qui ne fonctionne pas avec tous les navigateurs. Vous pouvez cependant faire avec un peu Javascript relativement 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) 
    } 
}

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

Source

2008-10-02 23:47:27 Dan

Attention à envelopper aveuglément ces contenus TD dans les liens; les éléments au niveau du bloc peuvent apparaître, et ils ne sont pas valides dans les balises A. De plus, je trouverais la bonne table et récupérerais ses éléments enfants et pas seulement ramasser tous les TD dans le document. –

Ce n'est pas possible avec CSS, et ce n'est pas du tout le cas pour CSS. Côté client Javascript ou côté serveur (insérer la langue de choix) est le chemin à parcourir.

Source

2008-10-02 23:50:47 da5id

Je ne pense pas que ce soit possible avec CSS. CSS est seulement supposé affecter l'apparence et la mise en page de votre contenu.

Cela ressemble à un travail pour un script PHP (ou un autre langage). Vous ne l'avez pas donné suffisamment de renseignements pour moi de connaître 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 simplement le script à partir de la ligne de commande et redirigez la sortie vers un fichier .html.

Source

2008-10-02 23:52:09

ici est une solution jQuery spécifique à votre HTML affiché:

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

en substance, sur chaque élément .Boîtier, va récupérer le contenu de l'élément, et les jeter dans un lien enroulé autour de lui.

Source

2008-10-03 00:03:26 Owen

Vous pourriez avoir quelque chose comme ça (en utilisant Javascript). A l'intérieur <head>, ont

<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 il fonctionne très bien.

Source

2008-10-03 00:06:56

-3

Je sais que c'est une vieille question, mais je suis tombé sur ce poste à la recherche d'une solution pour créer des liens en utilisant le CSS et a fini par faire mon propre, pourrait intéresser quelqu'un tomber sur cette question comme je l'ai fait:

Voici une fonction php appelé 'éditeur de liens();' qui permet à un faux attribut CSS

connecter: 'url.com';

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

$ style_cont = file_get_contents (de style_path de $);

et le #id de l'élément correspondant. Heres la chose:

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ée/raccourcies en utilisant des commandes comme .wrap() ou getElementById() parce qu'il génère seulement la partie <a href='blah'>, mais en voyant que </a> disparaît de toute façon, sans une clause de l'ouvrir fonctionne toujours si vous venez de les ajouter partout: D

Source

2013-06-25 15:09:00 piethh

Insérer un lien à l'aide de CSS

Répondre

Questions connexes