Вставить ссылку с помощью CSS

Question

Я поддерживаю 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, но, похоже, нет способа повторить номер дела.

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

по существу, над каждым элементом .case, будет захватывать содержимое элемента и бросать их в ссылку, обернутую вокруг него.

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

Я знаю, что это старый вопрос, но я наткнулся на этот пост в поисках решения для создания гиперссылок с использованием 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

Answer 6

Вы можете получить что-то подобное (используя 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>

Я проверил, и он отлично работает.