javascript - Automatically add image to PDF links within WooCommerce product tabs -
within each product page have bunch of tabs , of them contain links other websites , contain pdf links.
what i'd somehow find pdf links within each tab , add following class them: pdf-icon. class have following css:
.pdf-icon::before { content: url(image.png) " "; }
is there way php or javascript?
btw, site i'm talking http://www.ibisci.com , example product http://www.ibisci.com/product/ib56000b-hr-2025-high-resolution-electrophoresis-dna-start-up-kit. scroll down see product tabs , click on "operation manual".
thanks in advance!
update:
op's page uses jquery tabs. however, links within tab content regular links. method below work, jquery solution might better option.
original:
there many solutions problem. method below basic illustrate 1 method. assumes href url , cycles through links on page looking .pdf extension. these have class applied make them red.
run code snippet test
<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>
Comments
Post a Comment