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

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

<ul class="tabs">
			<li style="background: #7FFF00;">娱乐</li>
			<li style="background: #6495ED;">趣事</li>
			<li style="background: #BD4932;">综艺</li>
			<li style="background: #58B850;">影视</li>
			<li style="background: #FFA500;">动漫</li>
			<div class="clear"></div>
		</ul>
		<div class="content" style="display: block;">
			<p>罗志祥时间管理</p>
			<p>林志玲婚后生活</p>
		</div>
		<div class="content">
			<p>女子喜吞铁制品</p>
			<p>惊险巨大蟒蛇</p>
		</div>
		<div class="content">
			<p>婆婆和妈妈们</p>
			<p>女儿们的恋爱</p>
		</div>
		<div class="content">
			<p>悬疑剧隐秘的角落</p>
			<p>古娜拉黑暗之神</p>
		</div>
		<div class="content">
			<p>哔哩哔哩动画</p>
			<p>镇魂街</p>
		</div>

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;
            }

效果图：

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