技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
6yang精典tab切换全局定义(门户中使用)
<!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=utf-8" />
<title>6yang精典tab切换</title>
</head>
<script language="javascript">
function tabChange(e, sindex) {
if (!e) return;
var es = e.parentNode.childNodes; var cindex = 0;
for (var i = 0; i < es.length; i++) {
if (es[i].nodeType != 1) continue;
if (es[i] == e) { cindex = i; if (es[i].className.indexOf('_hover') < 0) es[i].className = es[i].className + '_hover';
}
else es[i].className = es[i].className.replace('_hover', '');
}
if (sindex) { cindex -= sindex; if (cindex < 0) cindex = 0; }
var c = siblingNext(e.parentNode); if (!c || !c.childNodes || c.childNodes.length <= 0) return;
var vcount = -1;
for (var i = 0; i < c.childNodes.length; i++) {
if (c.childNodes[i].nodeType != 1) continue; vcount++;
c.childNodes[i].style.display = (vcount == cindex ? '' : 'none');
}
}
function siblingNext(ele) {
if (ele == null || typeof ele.nextSibling == 'undefined') return null;
while (ele.nextSibling != null && ele.nextSibling.nodeType != 1) ele = ele.nextSibling;
return ele.nextSibling;
}
</script>
<style type="text/css">
dd,dl,dt,body{ font-family:"宋体"; font-size:12px;}
.fl{ float:left;}.fr{ float:right;}
.clearfix{ clear:both;}
dl,dt,dd,a,ul,li{ margin:0; padding:0; color:#333; text-decoration:none; list-style:none;}
.tab_box{ margin:0; padding:0; width:333px; }
.tab_box dt{ }
.tab_box dt a{ float:left; padding:5px 10px; margin:0 3px 0 0;}
.tab_box dt a:hover{ background:#F30; color:#fff;}
.tab_box dt .fr{ float:right;}
.tab_box dd{ float:left; background:#f2f2f2; border:1px solid #ccc; width:328px; height:333px;}
.tab_but{ background:#ccc;}
.tab_but_hover{ color:#fff; background-color:#f30; }
</style>
<body>
<div class="tab_box">
<dl>
<dt class="clearfix"><a href="#" class="tab_but_hover" onmouseover="tabChange(this);">项目外包</a><a href="#" class="tab_but" onmouseover="tabChange(this);" >类型2</a><a href="#" class="tab_but" onmouseover="tabChange(this);">类型3</a><a href="#" class="tab_but" onmouseover="tabChange(this);">类型4</a><a href="#" class="fr">更多</a></dt>
<dd class="clearfix" >
<ul style=""><li>内容提要a1</li></ul>
<ul style="display:none;"><li>内容提要a2</li></ul>
<ul style="display:none;"><li>内容提要a3</li></ul>
<ul style="display:none;"><li>内容提要a4</li></ul>
</dd>
</dl>
</div>
</body>
</html>