Insert a Link Using CSS

I'm hand-maintaining an HTML document, and I'm looking for a way to automatically insert a link around text in a table. Let me illustrate:

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

I would like to automatically make every text in a TD with class "case" a link to that case in our bug tracking system (which, incidentally, is FogBugz).

So I'd like that "123456" to be changed to a link of this form:

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

Is that possible? I've played with the :before and :after pseudo-elements, but there doesn't seem to be a way to repeat the case number.

Not in a manner that will work across browsers. You could, however, do that with some relatively 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)
    }
}

You can apply it with something like onload = makeCasesClickable, or simply include it right at the end of the page.

here is a jQuery solution specific to your HTML posted:

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

in essence, over each .case element, will grab the contents of the element, and throw them into a link wrapped around it.

Not possible with CSS, plus that's not what CSS is for any way. Client-side Javascript or Server-side (insert language of choice) is the way to go.

I don't think it's possible with CSS. CSS is only supposed to affect the looks and layout of your content.

This seems like a job for a PHP script (or some other language). You didn't give enough information for me to know the best way to do it, but maybe something like this:

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

Then later in your document:

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

And if you want an .html file, just run the script from the command line and redirect the output to an .html file.

You could have something like this (using Javascript). Inside <head>, have

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

And then at the end of <body>

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

I've tested it, and it works fine.

I know this is an old question, but I stumbled upon this post looking for a solution for creating hyperlinks using CSS and ended up making my own, could be of interest for someone stumbling across this question like I did:

Here's a php function called 'linker();'that enables a fake CSS attribute

connect: 'url.com';

for an #id defined item. just let the php call this on every item of HTML you deem link worthy. the inputs are the .css file as a string, using:

$style_cont = file_get_contents($style_path);

and the #id of the corresponding item. Heres the whole thing:

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

this could probably be improved/shortened using commands like .wrap() or getelementbyID() because it only generates the <a href='blah'> portion, but seeing as </a> disappears anyway without a opening clause it still works if you just add them everywhere :D

来源：https://stackoverflow.com/questions/165082/insert-a-link-using-css

标签

html

hyperlink

fogbugz