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

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

1.Demo展示：

• onmuseover触发前：
  
• onmouseover触发时：
  

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="#">论坛A</a></li>
					<li><a href="#">论坛B</a></li>
					<li><a href="#">论坛C</a></li>
					<li><a href="#">论坛D</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">博客A</a></li>
					<li><a href="#">博客B</a></li>
					<li><a href="#">博客C</a></li>
					<li><a href="#">博客D</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">交流A</a></li>
					<li><a href="#">交流B</a></li>
					<li><a href="#">交流C</a></li>
					<li><a href="#">交流D</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">社区A</a></li>
					<li><a href="#">社区B</a></li>
					<li><a href="#">社区C</a></li>
					<li><a href="#">社区D</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">反馈A</a></li>
					<li><a href="#">反馈B</a></li>
					<li><a href="#">反馈C</a></li>
					<li><a href="#">反馈D</a></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代码：

	//封装通过id来查找元素的函数，不需要引入jquery库;
	function $(id){
		return typeof id === "string"?document.getElementById(id):document;
	}
	
	window.onload = function(){
		//获取5个标题名;
		var items = $("list").getElementsByTagName("li");
		//获取5个内容盒子;
		var	divs = $("item").getElementsByTagName("div");
		if(items.length != divs.length){
			return;
		}
		
		//循环遍历标题名和内容盒子;
		for(var i = 0,len = items.length; i < len; i++){
			items[i].id = i;
			items[i].onmouseover = function(){
				for(var j = 0,len = items.length; j < len; j++){
					items[j].className = "";
					divs[j].style.display = "none";
				}
				this.className = "select";	
				divs[this.id].style.display = "block";
			}
		}
	}

注：
1.自己写的函数，尽量做到把其封装起来，让其能够复用
2.如要实现点击切换，把" mouseover " 改为 " onclick "即可
3.涉及到循环遍历数组的时候，为了避免进入死循环，尽量使用以下方式：

	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/87270244)
如要实现自动切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87271432).
~如遇错误，欢迎指正；

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

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

  福利链接点击这里！