使用 CSS 插入链接

发布于 2024-07-05 21:43:30 字数 447 浏览 11 评论 0原文

我正在手动维护一个 HTML 文档,并且正在寻找一种在表格中的文本周围自动插入链接的方法。 让我举例说明:

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

我想自动将 TD 中具有“case”类的每个文本链接到我们的错误跟踪系统(顺便说一句,是 FogBugz)中的该案例。

所以我希望将“123456”更改为这种形式的链接:

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

这可能吗? 我玩过 :before 和 :after 伪元素,但似乎没有办法重复案例编号。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

荒人说梦 2024-07-12 21:43:30

不是以跨浏览器工作的方式。 但是,您可以使用一些相对简单的 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)
    }
}

您可以使用诸如 onload = makeCasesClickable 之类的内容来应用它,或者只是将其包含在页面末尾。

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.

千纸鹤带着心事 2024-07-12 21:43:30

你可以有这样的东西(使用Javascript)。 在 里面,有

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

然后在 的末尾

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

我已经测试过它,它工作得很好。

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.

你是年少的欢喜 2024-07-12 21:43:30

我认为 CSS 不可能做到这一点。 CSS 只应该影响内容的外观和布局。

这似乎是 PHP 脚本(或其他语言)的工作。 您没有提供足够的信息让我知道最好的方法,但也许是这样的:

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

然后在您的文档中:

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

如果您想要一个 .html 文件,只需从命令行运行脚本并重定向输出到 .html 文件。

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.

℉服软 2024-07-12 21:43:30

CSS 是不可能的,而且 CSS 根本就不是这样的。 客户端 Javascript 或服务器端(插入选择的语言)是可行的方法。

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.

滿滿的愛 2024-07-12 21:43:30

这是针对您发布的 HTML 的 jQuery 解决方案:

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

本质上,在每个 .case 元素上,将获取该元素的内容,并将它们放入包裹在其周围的链接中。

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.

千纸鹤带着心事 2024-07-12 21:43:30

我知道这是一个老问题,但我偶然发现这篇文章寻找使用 CSS 创建超链接的解决方案,并最终制作了自己的解决方案,对于像我一样偶然发现这个问题的人可能会感兴趣:

这是一个名为 ' linker();'启用假 CSS 属性

连接:'url.com';

对于 #id 定义的项目。
只需让 php 在您认为值得链接的每个 HTML 项目上调用此方法即可。
输入是 .css 文件作为字符串,使用:

$style_cont = file_get_contents($style_path);

以及相应项目的#id。 整个事情如下:

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

这可能可以使用 .wrap() 或 getelementbyID() 等命令来改进/缩短
因为它只生成 部分,但是看到 无论如何都会消失,没有开头子句,如果您只需将它们添加到任何地方即可:D

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文