Вставить ссылку с помощью CSS
Я вручную обслуживаю 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, но, похоже, нет способа повторить номер дела.
Ответы 6
Не так, чтобы работать в разных браузерах. Однако вы можете сделать это с помощью относительно тривиального 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 или просто включить его в конец страницы.
Будьте осторожны с тем, чтобы слепо обернуть содержимое TD в ссылки; Могут отображаться элементы уровня блока, и они не действительны внутри тегов A. Кроме того, я бы нашел нужную таблицу и получил ее дочерние элементы, а не просто зачерпнул бы все TD в документе.
Это невозможно с CSS, да и CSS это не так. Javascript на стороне клиента или на стороне сервера (укажите язык по выбору) - лучший вариант.
Я не думаю, что это возможно с помощью 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.
вот решение jQuery, специфичное для вашего опубликованного HTML:
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href = "example.com/script.php?id='+link+'"></a>');
});
по сути, по каждому элементу .case захватывает содержимое элемента и бросает его в ссылку, обернутую вокруг него.
У вас может быть что-то вроде этого (используя 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>
Я протестировал его, и он отлично работает.
Я знаю, что это старый вопрос, но я наткнулся на этот пост в поисках решения для создания гиперссылок с использованием CSS и в итоге создал свой собственный, может быть интересен тем, кто наткнулся на этот вопрос, как и я:
Вот функция php под названием 'linker ();', которая включает поддельный атрибут CSS
connect: '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
Что вы имеете в виду автоматически? Вам нужно будет запустить какое-то приложение поверх вашего HTML, которое преобразует его в желаемые результаты.