H5+CSS+JS Tab导航栏自动切换

最新推荐文章于 2022-06-01 10:12:02 发布

今夕今年

最新推荐文章于 2022-06-01 10:12:02 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/baidu_31481511/article/details/90256050

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

传智播客教材案例功能删改

html5

<!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>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>2014版传智播客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;}

//加载事件
window.onload = function(){
	//获取所有tab-head-div
	var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
	//保存当前焦点元素的索引
	var current_index=0;
	//启动定时器
	var timer = window.setInterval(autoChange, 2000);
	
	
	//定时器周期函数-Tab栏自动切换
	function autoChange(){
		//自增索引
		current_index++;
		//当索引自增达到上限时，索引归0
		if (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-ul
		var 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";
			}
		}
		
	}
}