插入一个链接使用CSS(Insert a Link Using CSS)

2019-09-02 17:15发布

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

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

我想自动在有类“案例”一TD每个文本链接,这种情况下,我们的bug跟踪系统(顺便说一下,是FogBugz的)。

所以我想的是“123456”要改变这种形式的链接:

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

那可能吗? 我打过与:after伪元素,但似乎并没有被重复的情况下数道:前后。

Answer 1:

不是的方式,将跨浏览器的工作。 你可以,但是,做一些比较琐碎的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 ,或者干脆包括它的权利在页面的末端。



Answer 2:

这里是一个jQuery的特定于HTML的解决方案发布:

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

在本质上,在每个元素。病例,会抢了元素的内容,并把它们扔到缠着链接。



Answer 3:

不可能的CSS,再加上这也不是什么CSS任何方式。 客户端JavaScript或服务器端(选择插入语言)是要走的路。



Answer 4:

我不认为这是可能的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文件。



Answer 5:

你可能有这样的事情(使用Javascript)。 内部<head>

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

然后在所述端部<body>

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

我测试过它,它工作正常。



Answer 6:

我知道这是一个老问题,但我偶然发现了这个帖子寻找创建使用CSS超链接的解决方案,并最终使我自己,可能是跨越了这个问题的人磕磕绊绊像我一样的兴趣:

这里有被称为PHP函数“连接器();”,使假的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()命令,因为它仅产生缩短的<a href='blah'>部,但看到</a>反正消失,不用它仍然有效,如果一个开口子句你只需要添加他们无处不在:d



文章来源: Insert a Link Using CSS