后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

web万用切换卡tab

程序猿 JS web 切换卡 tab... (shuke.2014-12-09 10:18)
发现网上的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";
}



进度:100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME