html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换

html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换

1.Demo展示：

• 计时器未生效：
  
• 计时器事件生效：
  

2 . Html布局：

	<div class="wrap">
		<div class="container-top" id="list">
			<ul>
				<li><a href="">论坛a>li>
				<li><a href="">博客a>li>
				<li><a href="">交流a>li>
				<li><a href="">社区a>li>
				<li><a href="">反馈a>li>
			ul>
		div>
		<div class="container-bottom" id="item">
			<div class="con">
				<ul>
					<li><a href="#">论坛Aa>li>
					<li><a href="#">论坛Ba>li>
					<li><a href="#">论坛Ca>li>
					<li><a href="#">论坛Da>li>
				ul>
			div>
			<div class="con">
				<ul>
					<li><a href="#">博客Aa>li>
					<li><a href="#">博客Ba>li>
					<li><a href="#">博客Ca>li>
					<li><a href="#">博客Da>li>
				ul>
			div>
			<div class="con">
				<ul>
					<li><a href="#">交流Aa>li>
					<li><a href="#">交流Ba>li>
					<li><a href="#">交流Ca>li>
					<li><a href="#">交流Da>li>
				ul>
			div>
			<div class="con">
				<ul>
					<li><a href="#">社区Aa>li>
					<li><a href="#">社区Ba>li>
					<li><a href="#">社区Ca>li>
					<li><a href="#">社区Da>li>
				ul>
			div>
			<div class="con">
				<ul>
					<li><a href="#">反馈Aa>li>
					<li><a href="#">反馈Ba>li>
					<li><a href="#">反馈Ca>li>
					<li><a href="#">反馈Da>li>
				ul>
			div>
		div>
	div>
	

3. css样式表：

	*{
		margin:0;
		padding:0;
		text-decoration:none;
		list-style:none;
	}

	a{
		color:#fff;
		font-size:13px;
		display:block;
	}

	a:hover{
		color:#ccc;
	}

  	.wrap{
		margin:60px auto;
		width:250px;
		height:auto;
	}
	
	.container-top{
		height:30px;
	}

	.container-bottom{
		height:60px;
		overflow:hidden;
	}
	
	.container-top ul{
		height:30px;
	}

	.container-top ul li{
		float:left;
		width:50px;
		height:30px;
		line-height:30px;
		text-align:center;
		background-color:#ccc;
	}
	
	.container-bottom ul{
		height:60px;
		background-image:linear-gradient(to right,#FF00FF,#E066FF);
	}

	.container-bottom ul li{
		width:125px;
		height:30px;
		line-height:30px;
		float:left;
		text-align:center;
		background:none;
	}

	.select{
		background-image:linear-gradient(to right,dimgray,gray);
	}
	

4. 原生js代码：

	function $(id){
		return typeof id ==="string"?document.getElementById(id):document;
	}
	
	window.onload = function(){
		//初始化计时器;
		var timer = null;
		//初始化索引;
		var index = -1;
		var items = $("list").getElementsByTagName("li");
		var divs = $("item").getElementsByTagName("div");
	
	
		function autoPlay(){
			index++;
			if(index > 4) index = 0;
			for(var i = 0,len = items.length; i < len; i++){
				items[i].className = "";
				divs[i].style.display = "none";
			}
			items[index].className = "select";
			divs[index].style.display = "block";
		}
	
		timer = setInterval(autoPlay,1000);
	
	}

注：
1.写的函数，尽量做到把其封装起来，让其能够复用
2.如要实现点击切换，把" mouseover " 改为 " onclick "即可
3.注意setTimeout 和 setInterval 的区别，一个是延迟执行代码，一个是循环执行代码；
4.涉及到循环遍历数组的时候，为了避免进入死循环，尽量使用以下方式：

	for(var i = 0,len = items.length; i < len; i++){ 
		代码块;
	}

而不是这样：

	for(var i = 0; i < items.length; i++){ 
		代码块;
	}

如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286).
如要实现延迟切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87270244).
~如遇错误，欢迎指正；

• 结束语…………………………福利时间到………………………………

  大家同为程序员，在这里给大家真诚的送上福利。

  福利链接点击这里！