传智播客教材案例功能删改
html5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tab栏切换</title><link href="example27.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="example27.js"></script></head><body><div class="tab-box"><div class="tab-head" id="tab-head"><div class="tab-head-div current">公司动态</div><div class="tab-head-div">开学典礼</div><div class="tab-head-div">学员感言</div><div class="tab-head-div tab-head-r">学员故事</div></div><div class="tab-body" id="tab-body"><ul class="tab-body-ul current"><li>网络营销课程钜惠5000元，只剩最后10天</li><li>《传智特刊》开年任性大改版,第22期炫酷上线</li><li>版传智播客PHP学习路线图霸气上线</li><li>IT教师的福音,专教技术干货的大学教材震撼首发</li></ul><ul class="tab-body-ul"><li>且行且珍惜，退伍兵钟爱传智播客</li><li>听听学员讲述传智播客跟其他机构的对比</li><li>基础班学员为新学员指点迷津</li><li>女汉纸背后的故事：试听课上被老师折服</li></ul><ul class="tab-body-ul"><li>用汗水证明这是传智播客的时代</li><li>瓦工的“程序员”梦</li><li>iOS学习之路,撑起我的成长梦想</li><li>催人泪下：一个电力工人转身IT的经历</li></ul><ul class="tab-body-ul"><li>一个让老程序员都汗颜的应届生</li><li>草根学员从求知走向岗位的蜕变故事</li><li>我与编程的“爱恨情仇”</li><li>狂风暴雨之后才是最灿烂的彩虹</li></ul></div></div></body></html>
css
@charset "utf-8";/* CSS Document *//*全局控制*/body{ font-size:14px; font-family:"宋体";}/*清除浏览器默认样式*/body,ul,li{list-style:none; margin:0; padding:0; }/*大div样式*/.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}/*选项样式*/.tab-head{height:31px;}.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#eee;line-height:30px;text-align:center;cursor:pointer;}.tab-head .current{background:#fff;border-bottom:1px solid #fff;}.tab-head-r{border-right:0;}/*选项内容样式*/.tab-body-ul{display:none;margin:20px 10px;}.tab-body-ul li{margin:5px;}.tab-body .current{display:block;}
js
//加载事件window.onload = function(){//获取所有tab-head-divvar head_divs = document.getElementById("tab-head").getElementsByTagName("div");//保存当前焦点元素的索引var current_index=0;//启动定时器var timer = window.setInterval(autoChange, 2000);//定时器周期函数-Tab栏自动切换function autoChange(){//自增索引current_index++;//当索引自增达到上限时，索引归0if (current_index == head_divs.length) {current_index=0;}//当前标题的背景颜色和边框颜色for(var i=0;i<head_divs.length;i++){if(i == current_index){head_divs[i].style.backgroundColor = '#fff';head_divs[i].style.borderBottom = '1px solid #fff';}else{head_divs[i].style.backgroundColor = '';head_divs[i].style.borderBottom = '';}}//获取所有tab-body-ulvar body_uls = document.getElementById("tab-body").getElementsByTagName("ul");//遍历元素for(var i=0;i<body_uls.length;i++){//将所有元素设为隐藏body_uls[i].className = body_uls[i].className.replace(" current","");head_divs[i].className = head_divs[i].className.replace(" current","");//将当前索引对应的元素设为显示if(head_divs[i] == head_divs[current_index]){this.className += " current";body_uls[i].className += " current";}}}}
