发现网上的JS使用起来很复杂,就动手写了一个万能切换卡;<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="Author" content="shuke">
<title>万用切换卡</title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="/img/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
dt{line-height:35px;}
[class*="sktabc_"]{display:none}
.sktabc_1{display:block}
.sktabh{background:gray;}
</style>
</head>
<body>
<dl class="kh_width980 kh_p10">
<dt>
<span class=""id="sktabt_1"onmouseover='sktab("sktabt_1","sktabc_1",3)'><a href="">a</a></span>
<span class=""id="sktabt_2"onmouseover='sktab("sktabt_2","sktabc_2",3)'><a href="">b</a></span>
<span class=""id="sktabt_3"onmouseover='sktab("sktabt_3","sktabc_3",3)'><a href="">c</a></span>
</dt>
<dd>
<div class="sktabc_1" id="sktabc_1">aaa</div>
<div class="sktabc_2"id="sktabc_2">bbb</div>
<div class="sktabc_3"id="sktabc_3">ccc</div>
</dd>
</dl>
</body>
</html>
<script type="text/javascript">
//万用切换卡 onmouseover='sktab("sktabt_1","sktabc_1",3)'
function sktab(a,b,c)
{
for(i=1;i<=c;i++)
{document.getElementById("sktabt_"+i).className="sktabnh";}
document.getElementById(a).className="sktabh";
for(i=1;i<=c;i++)
{document.getElementById("sktabc_"+i).style.display="none";}
document.getElementById(b).style.display="block";
}
</script>
简化:
//万用切换卡 onmouseover='sktab("sktabt_1","sktabc_1",3)'
document.writeln("<style type=\'text/css\'>[class*=\'sktabc_\']{display:none}.sktabc_1{display:block}</style>");
function sktab(a,b,c)
{
for(i=1;i<=c;i++)
{document.getElementById("sktabt_"+i).className="sktabnh";}
document.getElementById(a).className="sktabh";
for(i=1;i<=c;i++)
{document.getElementById("sktabc_"+i).style.display="none";}
document.getElementById(b).style.display="block";
}