Legen Sie einen Link mithilfe CSS

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

  •  03-07-2019
  •  | 
  •  

Frage

Ich bin von Hand Aufrechterhaltung eines HTML-Dokuments, und ich nach einer Möglichkeit, automatisch einen Link um Text in einer Tabelle einzufügen. Lassen Sie mich erläutern: 

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

Ich mag automatisch jeden Text in einem TD mit Klasse "Fall" ein Link zu diesem Fall in unserem Bug-Tracking-System machen (was, nebenbei bemerkt, ist FogBugz).

So möchte ich, dass "123456" auf einen Link von dieser Form geändert werden: 

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

Ist das möglich? Ich habe mit der gespielt: vor und:. Nach Pseudo-Elemente, aber es ist kein Weg zu sein scheint die Fallnummer zu wiederholen

War es hilfreich?

Lösung

Nicht in einer Weise, die in allen Browsern funktionieren. Sie könnten jedoch tun, dass mit einigen relativ trivial 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)
    }
}

Sie können es mit so etwas wie onload = makeCasesClickable anwenden oder einfach sind sie direkt am Ende der Seite.

Andere Tipps

Hier ist eine jQuery Lösung speziell für Ihre HTML geschrieben: 

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

im Wesentlichen über jedes .case Element, wird der Inhalt des Elements greifen, und werfen sie in einen Link um ihn herum gewickelt.

Nicht möglich mit CSS, und das ist nicht das, was CSS für jede Art und Weise ist. Client-seitige Javascript oder Server-Seite (insert Sprache der Wahl) ist der Weg zu gehen.

Ich glaube nicht, es mit CSS möglich ist. CSS sollte nur das Aussehen und das Layout Ihrer Inhalte beeinflussen.

Das scheint wie ein Job für einen PHP-Skript (oder eine andere Sprache). Sie gab nicht genügend Informationen für mich der beste Weg, zu wissen, es zu tun, aber vielleicht so etwas wie folgt aus: 

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

Dann später in Ihrem Dokument: 

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

Und wenn Sie eine HTML-Datei mögen, nur das Skript von der Kommandozeile ausführen und die Ausgabe in eine HTML-Datei umgeleitet werden.

Man könnte so etwas wie diese (mit Javascript). Innerhalb <head> haben 

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

Und dann am Ende des <body> 

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

Ich habe es getestet und es funktioniert gut.

Ich weiß, dass dies eine alte Frage, aber ich auf diesem Beitrag stolperte nach einer Lösung für die Erstellung von Hyperlinks CSS Suche verwenden und am Ende meines eigenes zu machen, könnte von Interesse sein jemand über diese Frage zu stolpern wie ich:

Hier ist eine PHP-Funktion namens 'Linker ();', das ein gefälschtes CSS-Attribut ermöglicht

  

connect: 'url.com';

für einen #id definierten Punkt. lassen Sie einfach die php diese von HTML auf jedem Artikel rufen Sie Link würdig erachten. die Eingänge der CSS-Datei als String sind , mit:

  

$ style_cont = file_get_contents ($ style_path);

und die #id des entsprechenden Elements. Heres das Ganze: 

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

dies wahrscheinlich verbessert / verkürzt werden könnte unter Verwendung von Befehlen wie .wrap () oder getElementByID () weil es den <a href='blah'> Teil nur erzeugt, sondern als </a> sehen verschwindet sowieso ohne Öffnungsklausel es funktioniert immer noch, wenn man sich nur hinzufügen, überall: D

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top