自动添加图像到PDF链接在WooCommerce产品标签 - Automatically add image to PDF links within WooCommerce product tabs

Automatically add image to PDF links within WooCommerce product tabs

在每个产品页面中，我们有一堆标签，其中一些包含到其他网站的链接，一些包含PDF链接。

我想做的是在每个选项卡中找到PDF链接，并向它们添加以下类:PDF -icon。这个类的CSS样式如下:

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

有办法做到这一点与PHP或Javascript?

顺便说一句，我正在谈论的网站是http://www.ibisci.com和一个示例产品是http://www.ibisci.com/product/ib56000b-hr-2025-high-resolution-electrophoresis-dna-start-up-kit。向下滚动查看产品标签，点击"操作手册"。

提前感谢!

update:

OP的页面使用jQuery作为选项卡。但是，选项卡内容中的链接是常规链接。因此，下面的方法将工作，但一个jQuery解决方案可能是一个更好的选择。

原始:

这个问题有很多解决办法。下面的方法是非常基本的说明一种方法。它假设href是一个url，并在页面上的链接中循环查找.pdf扩展名。它们有一个类被应用来使它们变成红色。

运行代码片段测试

<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>