您的位置：首页 > 其它

0708学习选项卡切换

2015-07-08 08:24 155 查看

代码分析：通过样式来控制效果 close 为display:none 为open时显示样式通过js来控制切换
js中的循环
首先获得素有的dl标签，在一个数组中下标为0的为第一个下为1的为第2个。。。
第一次循环循环次数为是所有选项的个数默认为样式关闭当鼠标移动上来后进行地次循环
其它选项样式依然关闭当前鼠标上的选项样式为open 为显示样式

在第一层循环中可以添加 alltabs[a].className="open"; a为具体的下标数字，级当前指定的选项默认被选中为初始状态

//具体代码如下：

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>xuexi</title>
<style type="text/css">

* { margin:0; padding:0 }
a{color:#333;}
div, dl, dt, dd { display:inline-block; }
div, dl, dt, dd { display:block }
h2{ font: 800 12px/20px "宋体"; }
#tabs { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }
#tabs div { padding:39px 4px 0px; position:relative; }
#tabs dt { text-align:center; font: 12px/30px "宋体"; }
#tabs dd { font: 12px/20px "宋体"; padding:10px; }
#tab1 dt,#tab4 dt,#tab7 dt,#tab10 dt { left: 4px; top: 4px }
#tab2 dt,#tab5 dt,#tab8 dt,#tab11 dt { left:130px; top:4px }
#tab3 dt,#tab6 dt,#tab9 dt,#tab12 dt { left:256px; top:4px }
#tab5 dt { left:130px; top:4px }
#tab6 dt { left:256px; top:4px }
.close dt { height:30px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }
.close dd { display:none }
.open dt { height:35px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }
.open dd { background:#EBEBEB; border:1px solid #ccc; }

</style>
<script type="text/javascript">
window.onload =
function(){
alltabs = document.getElementById('tabs').getElementsByTagName('dl')
for(i = 0; i < alltabs.length; i++){
alltabs[i].className = "close"

alltabs[i].onmouseover = function(){
for(j = 0; j < alltabs.length; j++){
alltabs[j].className = "close"
}
this.className = "open"
}
}
}
</script>


</head>
<body>
<div id="tabs">
<h2>测试</h2>
<div>
<dl id="tab1">
<dt>11</dt>
<dd><a href="#">1</a></dd>
</dl>
<dl id="tab2">
<dt>22</dt>
<dd><a href="#">2</a></dd>
</dl>
<dl id="tab3">
<dt>33</dt>
<dd>3</dd>
</dl>
</div>
<div>
<dl id="tab4">
<dt>44</dt>
<dd>4</dd>
</dl>
<dl id="tab5">
<dt>55</dt>
<dd>5</dd>
</dl>
<dl id="tab6">
<dt>66</dt>
<dd><a href="#">6</a></dd>
</dl>
</div>

<div>
<dl id="tab7">
<dt>77</dt>
<dd><a href="#">7</a></dd>
</dl>
<dl id="tab8">
<dt>88</dt>
<dd>8</dd>
</dl>
<dl id="tab9">
<dt>99</dt>
<dd><a href="#">9</a></dd>
</dl>
</div>
<div>
<dl id="tab10">
<dt>10</dt>
<dd>10</dd>
</dl>
<dl id="tab11">
<dt>11</dt>
<dd><a href="#">11</a></dd>
</dl>
<dl id="tab12">
<dt>12</dt>
<dd>12</dd>
</dl>
</div>

</div>

</body>
</html>

学习地址：http://www.51xuediannao.com/js/nav/297.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

0708学习 选项卡切换

0708学习选项卡切换