一流资源网找到这个JS代码的初衷是在制作一个企业网站时,客户希望产品详情页显示产品的颜色,而且颜色要以图片来代替显示。
原本是这样的:
但客户希望这样显示:
一般用PHP是可以实现的。
但很多站长或技术人员不懂PHP开发,要实现这个功能就比较困难,那么就可以使用这个JS代码来实现这个功能,虽然效率上比PHP实现差一点。但效果是一样的,
JS代码:
<script type='text/javascript'> window.onload=function(){ var div=document.getElementById('yanseb'); div.innerHTML=div.innerHTML.replace('<li>红色</li>',"<li class='red'></li>"); div.innerHTML=div.innerHTML.replace('<li>蓝色</li>',"<li class='blue'></li>"); div.innerHTML=div.innerHTML.replace('<li>白色</li>',"<li class='white'></li>"); div.innerHTML=div.innerHTML.replace('<li>黑色</li>',"<li class='black'></li>"); div.innerHTML=div.innerHTML.replace('<li>银色</li>',"<li class='silver'></li>"); div.innerHTML=div.innerHTML.replace('<li>黄色</li>',"<li class='yellow'></li>"); } </script>
将此JS代码放在网页 <head>区即可。
HTML代码示例:
<div id="yanseb"> <ul> <li>红色</li> <li>蓝色</li> <li>白色</li> <li>黑色</li> <li>银色</li> <li>黄色</li> </ul> </div>
注意JS代码中的 yanseb 。
这样,在网页运行时就会被JS替换成:
<div id="yanseb"> <ul> <li class='red'></li> <li class='blue'></li> <li class='white'></li> <li class='black'></li> <li class='silver'></li> <li class='yellow'></li> </ul> </div>
具体效果请看演示,一流资源网推荐下载。