CSSを使用してリンクを挿入する

StackOverflow https://stackoverflow.com/questions/165082

  •  03-07-2019
  •  | 
  •  

質問

HTMLドキュメントを手動で管理しています。テーブル内のテキストの周りにリンクを自動的に挿入する方法を探しています。説明しましょう：

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

クラス<！> quot; case <！> quot;でTD内のすべてのテキストを自動的に作成したいバグ追跡システム（偶然、FogBugz）のそのケースへのリンク。

だから、<！> quot; 123456 <！> quot;このフォームのリンクに変更する：

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

それは可能ですか？ ：beforeおよび：after擬似要素で遊んだことがありますが、ケース番号を繰り返す方法はないようです。

役に立ちましたか？

解決

ブラウザ間で機能する方法ではありません。ただし、比較的簡単な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のようなもので適用するか、単にページの最後に含めることができます。

他のヒント

投稿されたHTMLに固有の jQuery ソリューションは次のとおりです。

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

本質的に、各.case要素上で、要素の内容を取得し、その周りにラップされたリンクにスローします。

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ファイルにリダイレクトします。

このようなものがあります（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を使用してハイパーリンクを作成するためのソリューションを探してこの投稿を見つけて、自分で作成しました。 >

偽のCSS属性を有効にする「linker（）;」と呼ばれるphp関数です

  

connect： 'url.com';

#id定義アイテムの場合。 リンクにふさわしいと思われるHTMLのすべてのアイテムで、PHPがこれを呼び出すようにします。 入力は.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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top