借鉴是每个人必须具备的一项技能~吼吼~虽然对js不甚熟悉,但是简单的代码还是看得懂的.呵呵.前几天有个要做一个用JS+CSS的Tab切换小工具,结果做了半天效果都不是很好,在网上闲逛,偶然看见某网站的不错,便研究了一下,特将成果拿给大家分享,
怎么说呢.其实我想没有必要给这个源码写什么说明.但是如果您要对此进行修改的话我建议您注意下所有div 标签中的id,然后就是修改showside('content', 'uc', 'testmsg')"中""里的内容.细心点观察就能知道这个代码是怎么回事了~吼吼.
个人认为这个js的严谨性不错,关键是很实用,只要逻辑正确,放在哪里都能用啊,经测试,ie ff opera chrome 均显示正常.~吼吼...css就不弄了,太占篇幅了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>test</title>
<script type="text/javascript">
var siteUrl = "//";
function showside(area,id,className) {
var tabArea=document.getElementById(area);
var contents=tabArea.childNodes;
for(i=0; i<contents.length; i++) {
if(contents[i].className==className){contents[i].style.display='none';}
}
document.getElementById(id).style.display='';
var tabs=document.getElementById(area+'tabs').getElementsByTagName('a');
for(i=0; i<tabs.length; i++) { tabs[i].className=''; }
document.getElementById(id+'tab').className='ontab';
document.getElementById(id+'tab').blur();
}
</script>
</head>
<body>
<div id="content" class="content">
<div id="contenttabs" class="main">
<a id="uctab" href="javascript:;" title="1111" onclick="showside('content', 'uc', 'testmsg')" class="ontab">000</a>
<a id="dztab" href="javascript:;" title="2222" onclick="showside('content', 'dz', 'testmsg')">111</a>
<a id="uchtab" href="javascript:;" title="3333" onclick="showside('content', 'uch', 'testmsg')">222</a>
<a id="sstab" href="javascript:;" title="4444" onclick="showside('content', 'ss', 'testmsg')">3333</a>
</div>
<div id="uc" class="testmsg">
1111111111111111
</div>
<div id="dz" class="testmsg" style="display:none;">
2222222222222222
</div>
<div id="uch" class="testmsg" style="display:none;">
3333333333333
</div>
<div id="ss" class="testmsg" style="display:none;">
4444444444444444444
</div>
</div>
</body>
</html>
如果您在使用中有什么问题欢迎回帖询问
