Insérer un Lien à l'Aide de CSS

Je suis à la main le maintien d'un document HTML, et je suis à la recherche d'un moyen pour insérer automatiquement un lien autour d'un texte dans un tableau. Permettez-moi d'illustrer:

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

Je voudrais faire automatiquement chaque texte dans un TD avec la classe "affaire" un lien pour ce cas de figure dans notre système de suivi des bogues (qui, incidemment, est FogBugz).

Donc j'aimerais que "123456" être changé pour un lien de cette forme:

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

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

Que voulez-vous dire automatiquement? Vous aurez besoin d'exécuter une application sur votre HTML qui permettra de convertir les résultats souhaités.

OriginalL'auteur Schof | 2008-10-02

11

Pas d'une manière qui fonctionne sur tous les navigateurs. Vous pouvez, cependant, faire avec certains relativement peu de Javascript..
```
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 tout simplement l'inclure à la fin de la page.

Attention au sujet de la aveuglément habillage ceux TD contenu dans les liens; les éléments de niveau bloc peut se montrer, et ils ne sont pas valables à l'intérieur de balises. Aussi, j'aimerais trouver la bonne table et d'obtenir son enfant éléments, et pas seulement ramasser tous les TDs dans le document.

OriginalL'auteur Dan
8

ici est un jQuery solution spécifique à votre HTML posté le:
```
$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});
```
en substance, sur chaque .cas de l'élément, va récupérer le contenu de l'élément, et les jeter dans un lien enroulé autour d'elle.

OriginalL'auteur Owen
4

Pas possible avec les CSS, en plus c'est pas ce que le CSS n'est d'aucune manière. Javascript côté Client ou côté Serveur (insérez le choix de la langue) est le chemin à parcourir.

OriginalL'auteur da5id
1

Je ne pense pas que c'est possible avec les CSS. CSS n'est censé affecter l'apparence et la mise en page de votre contenu.

Cela semble comme un travail pour un script PHP (ou autre langage). Tu ne donnes pas assez d'informations pour me faire 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 en voulez un .fichier html, il suffit d'exécuter le script à partir de la ligne de commande et de rediriger la sortie vers un .fichier html.

OriginalL'auteur Jeremy Ruten

Vous pourriez avoir quelque chose comme ceci (à l'aide de Javascript). À l'intérieur de <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.

OriginalL'auteur Vincent McNabb

-3

Je sais que c'est une vieille question, mais je suis tombé sur ce post à la recherche d'une solution pour créer des liens hypertexte à l'aide de CSS et a fini par faire mon propre, pourrait être d'intérêt pour quelqu'un de tomber sur cette question, comme je l'ai fait:

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

de se connecter: "url.com';

pour un #id de l'élément défini.
il suffit de laisser le php appeler ce sur chaque élément de HTML que vous jugez lien digne.
les entrées sont à l' .fichier css comme une chaîne de caractères, à l'aide de:

$style_cont = file_get_contents($style_path);

et le n ° id de l'élément correspondant. Heres la chose entière:

    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é ou réduite à l'aide des commandes comme .wrap() ou getelementbyID()
parce qu'il ne génère de la <a href='blah'> partie, mais, voyant que </a> disparaît de toute façon, sans une clause d'ouverture, il fonctionne toujours si vous venez d'ajouter partout 😀

OriginalL'auteur piethh

Vous devez vous connecter pour publier un commentaire.