How to realize tabs function with js Code

This article introduces the relevant knowledge of "how to use js code to achieve tabs function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Document * {margin:0; padding:0; list-style:none;} .tabs {margin:10px;} .tabs-nav:before, .tabs-nav:after {display:table; content:'';} .tabs-nav:after {width:100%; clear:both; border-bottom:1px solid # 47a3da;} .tabs-nav li {position:relative; float:left; margin-right:5px; border:1px solid # becbd2; border-bottom:none;} .tabs-nav li.active:after {position:absolute Bottom:-1px; width:100%; display:block; content:''; border-bottom:1px solid # fff;}. Tabs-nav a {display:block; padding:0 20px; line-height:30px; text-decoration:none; color:#000; font-size:14px;}. Tabs-cnt {padding:10px;} .tabs-content {display:none;} .tabs-content:first-child {display:block;} _ window.onload=function () {var oTabs=document.getElementById ('tabs1') Var aTabsNav=oTabs.querySelectorAll ('. Tabs-nav li'); var aTabsCnt=oTabs.querySelectorAll ('. Tabs-content'); for (var item0)