在 WooCommerce 产品选项卡中自动将图像添加到 PDF 链接

Question

在每个产品页面中，我们都有一堆选项卡，其中一些包含指向其他网站的链接，一些包含 PDF 链接。

我想做的是以某种方式在每个选项卡中找到 PDF 链接并向其中添加以下 class：pdf-icon。此 class 将具有以下 CSS：

.pdf-icon::before {
  content: url(image.png) " ";
}

有没有办法用 PHP 或 Javascript 做到这一点？

顺便说一句，我说的网站是 http://www.ibisci.com and an example product is http://www.ibisci.com/product/ib56000b-hr-2025-high-resolution-electrophoresis-dna-start-up-kit。向下滚动以查看产品选项卡并单击 "Operation Manual"。

提前致谢！

Answer 1

更新：

OP 的页面使用 jQuery 作为选项卡。但是，选项卡内容中的链接是常规链接。所以下面的方法可行，但 jQuery 解决方案可能是更好的选择。

原文：

这个问题有很多解决办法。下面的方法非常基本，可以说明一种方法。它假定 href 是一个 url 并循环浏览页面上的链接以查找 .pdf 扩展名。这些应用了 class 以使其变为红色。

运行要测试的代码片段

<html>
<body>
<style type="text/css">
    .myclass { color: red; }
</style>   

<h2>Find PDF Links</h2>    
<ol>    
    <li><a href="page1.pdf">example1.pdf</a>   
    <li><a href="page1.pdf">example2.pdf</a>    
    <li><a href="page1.html">example3.html</a> 
    <li><a href="page1.pdf">example4.pdf</a> 
</ol>
    
<script type="text/javascript">
    
   var i, links = document.getElementsByTagName('a');
    
    for(i=0; i<links.length; i++) {
        if (links[i].href.match(/.pdf/ig)) links[i].className = 'myclass';
    }
    
</script>
    
</body>
</html>

在 WooCommerce 产品选项卡中自动将图像添加到 PDF 链接

Automatically add image to PDF links within WooCommerce product tabs

javascript

php

wordpress

jquery

woocommerce