JS写选项卡，点击不同颜色选项卡，内容出现与之对应的颜色,直接上代码！

写的比较粗糙，但应该能够通俗易懂
HTML：

			
娱乐
			
趣事
			
综艺
			
影视
			
动漫
			

		
		

			
罗志祥时间管理
			
林志玲婚后生活
		
		

			
女子喜吞铁制品
			
惊险巨大蟒蛇
		
		

			
婆婆和妈妈们
			
女儿们的恋爱
		
		

			
悬疑剧隐秘的角落
			
古娜拉黑暗之神
		
		

			
哔哩哔哩动画
			
镇魂街
		

css:

*{margin: 0;padding: 0px;}
			li{list-style: none;float:left;}
			.tabs li{width: 120px;height: 50px;text-align: center;line-height: 50px;
			background-color: #7FFFD4;color: #A52A2A;margin-right: 2px;}
			.clear{clear: both;}
			.content{display: none;width: 608px;height: 300px;background: #AAAAAA;}

JavaScript：

var tabs=document.querySelectorAll(".tabs li");
			var content=document.getElementsByClassName("content");
			for(var i=0;i<tabs.length;i++){
				tabs[i].index=i;
				tabs[i].onclick=function(){
					for(var j=0;j<content.length;j++){
					content[j].style.display="none"
				    }
					content[this.index].style.display="block";
				}
			}
			for(var k=0; k<tabs.length;k++){
                content[k].style.background=tabs[k].style.background;
            }

效果图：

这是自己尝试做的第一篇博客，希望能给你们有一些帮助