当前位置:  开发笔记 > 编程语言 > 正文

使用CSS插入链接

如何解决《使用CSS插入链接》经验,为你挑选了2个好方法。

我正在手工维护一个HTML文档,我正在寻找一种方法来自动在表格中的文本周围插入一个链接.让我说明一下:

123456

我想在我们的错误跟踪系统(顺便说一句,就是FogBugz)中自动使用类"case"的TD中的每个文本链接到该案例.

所以我希望将"123456"更改为此表单的链接:

123456

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



1> Dan..:

不是以跨浏览器的方式工作.但是,您可以使用一些相对简单的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,或者只是将其包含在页面的末尾.



2> Owen..:

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

$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('');
});

实质上,在每个.case元素上,将获取元素的内容,并将它们放入包裹它的链接中.

推荐阅读
有风吹过best
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有