今天给客户做网站时,在网上找到一个代码很简洁的滑动门代码,觉得很不错,发出来给大家参考一下。代码如下:
<div class="Products_info">
<div class="js_title">
<span id="title_0" onmouseover="CatalogClick(0);"><strong>Specification</strong></span>
<span id="title_1" onmouseover="CatalogClick(1);"><strong>Function</strong></span>
</div><div class="clear"></div>
<div id="content_0" style="border:1px solid #d1dee8; padding:10px;" >
<span class="description">Product Description</span>
<div><span style="font-size:18px;"><strong><span style="background-color:#ffff00;">New launched MK802+ (1GB DDR3),100pcs stock for selling now~</span></strong></span></div>
</div>
<div id="content_1" style="border:1px solid #d1dee8; padding:10px; display:none">54545454</div>
</div>
</div>
在最后加上JS代码:
<script language="javascript">
function CatalogClick(id)
{
for (i=0; i<=3; i++)
{
var obj = eval("content_"+i)
var about = eval("title_"+i)
if (i == id )
{
about.style.color = "#ff0000";
obj.style.display = "";
}else{
// if ((id < 3 && i <4)||(id > 3 && i >3))
// {
obj.style.display = "none";
about.style.color = "#1574b5";
// }
}
}
}
</script>