أدخل رابطًا باستخدام CSS

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

  •  03-07-2019
  •  | 
  •  

سؤال

إنني أحصل على مستند HTML ، وأنا أبحث عن وسيلة لإدراج رابط حول النص تلقائيًا في جدول. اسمحوا لي أن أوضح:

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

أرغب في عمل كل نص تلقائيًا في TD مع "Case" "Case" رابط لتلك الحالة في نظام تتبع الأخطاء لدينا (والذي ، بالمناسبة ، هو Fogbugz).

لذلك أود تغيير "123456" إلى رابط لهذا النموذج:

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

هل هذا ممكن؟ لقد لعبت مع: قبل و: بعد العناصر الزائفة ، ولكن لا يبدو أن هناك طريقة لتكرار رقم القضية.

هل كانت مفيدة؟

المحلول

ليس بطريقة تعمل عبر المتصفحات. ومع ذلك ، يمكنك القيام بذلك مع بعض 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, ، أو ببساطة تضمينها في نهاية الصفحة.

نصائح أخرى

هنا jQuery الحل الخاص بـ HTML المنشور:

$('.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 وانتهى الأمر بصنع خاص بي ، يمكن أن يكون مهما كان مهمًا لشخص يتعثر عبر هذا السؤال كما فعلت:

فيما يلي وظيفة PHP تسمى "Linker () ؛" تتيح سمة CSS مزيفة

الاتصال: '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> يختفي على أي حال بدون شرط افتتاح لا يزال يعمل إذا قمت فقط بإضافته في كل مكان: د

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top