Html 使用 CSS 插入链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/165082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert a Link Using CSS
提问by Schof
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:
我正在手动维护一个 HTML 文档，我正在寻找一种方法来自动在表格中的文本周围插入链接。让我举例说明：
<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).
我想在我们的错误跟踪系统（顺便说一句，是 FogBugz）中自动使 TD 中的每个文本都带有“case”类的链接。
So I'd like that "123456" to be changed to a link of this form:
所以我希望将“123456”更改为这种形式的链接：
<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.
那可能吗？我玩过 :before 和 :after 伪元素，但似乎没有办法重复案例编号。
采纳答案by Dan
Not in a manner that will work across browsers. You could, however, do that with some relatively trivial Javascript..
不是以跨浏览器工作的方式。但是，您可以使用一些相对简单的 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.
您可以使用类似的内容来应用它onload = makeCasesClickable，或者简单地将它包含在页面的末尾。
回答by Owen
here is a jQuerysolution specific to your HTML posted:
这是特定于您发布的 HTML的jQuery解决方案：
$('.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.
本质上，在每个 .case 元素上，将获取元素的内容，并将它们放入一个环绕它的链接中。
回答by da5id
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.
用 CSS 不可能，而且这不是 CSS 的任何方式。客户端 Javascript 或服务器端（插入选择的语言）是要走的路。
回答by Jeremy Ruten
I don't think it's possible with CSS. CSS is only supposed to affect the looks and layout of your content.
我认为 CSS 是不可能的。CSS 应该只影响内容的外观和布局。
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:
这似乎是 PHP 脚本（或其他语言）的工作。你没有提供足够的信息让我知道最好的方法，但也许是这样的：
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.
如果您需要 .html 文件，只需从命令行运行脚本并将输出重定向到 .html 文件。
回答by Vincent McNabb
You could have something like this (using Javascript). Inside <head>, have
你可以有这样的东西（使用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>
And then at the end of <body>
然后在最后 <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.
我已经测试过了，它工作正常。
回答by piethh
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:
我知道这是一个老问题，但我偶然发现了这篇文章，正在寻找使用 CSS 创建超链接的解决方案，并最终创建了我自己的解决方案，对于像我一样绊倒这个问题的人来说可能会感兴趣：
Here's a php function called 'linker();'that enables a fake CSS attribute
这是一个名为“linker();”的 php 函数，它启用了一个假的 CSS 属性
connect: 'url.com';
连接：'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:
对于#id 定义的项目。只需让 php 在您认为值得链接的每个 HTML 项目上调用它即可。输入是 .css 文件作为字符串，使用：
$style_cont = file_get_contents($style_path);
$style_cont = file_get_contents($style_path);
and the #id of the corresponding item. Heres the whole thing:
和相应项目的#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">';
};
};
};
};
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
这可能可以使用 .wrap() 或 getelementbyID() 之类的命令来改进/缩短，因为它只生成该<a href='blah'>部分，但是在</a>没有开头子句的情况下看到消失了，如果你只是在任何地方添加它们，它仍然有效：D
