This article has shared with you the specific code for JS to implement a simple tab switching effect for your reference. The specific content is as follows
js tab switching code:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title><link rel="stylesheet" type="text/css" href="base.css" media="all"/><style type="text/css">a{color:#a0b3d6;}.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}.tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}</style></head><body><div id="tabs"><h2><a href="javascript:;">Home</a><a href="javascript:;">Technology</a><a href="javascript:;">Life</a><a href="javascript:;">Works</a></h2><p>Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home </p><p>Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology</p><p>Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works </p></div><br/><br/><div id="tabs2"><h2><a href="javascript:;">11111</a><a href="javascript:;">22222</a><a href="javascript:;">33333</a></h2><p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 type="text/javascript" src="tabs.js"></script><script type="text/javascript">window.onload = function(){tabs('tabs','click');tabs('tabs2','mouseover');}</script> </body></html>Tabs.js
function tabs(id, trigger){var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a');var tabsContent = document.getElementById(id).getElementsByTagName('p');for(var i = 0,len = tabsBtn.length; i < len; i++){tabsBtn[i].index = i;if(trigger == 'click'){tabsBtn[i].onclick = function(){clearClass(); this.className = 'on';showContent(this.index);}}else if(trigger == 'mouseover'){tabsBtn[i].onmouseover = function(){clearClass(); this.className = 'on';showContent(this.index);}}}function showContent(n){for(var i = 0,len = tabsBtn.length; i < len; i++){tabsContent[i].className = 'hide';}tabsContent[n].className = 'tabs-content';}function clearClass(){for(var i = 0,len = tabsBtn.length; i < len; i++){tabsBtn[i].className = '';}}}base.css
@charset "utf-8";/*@ Name: base@ Function: Reset the browser default style*//* Prevent the impact of user-defined background color on the web page, add to allow users to customize fonts*/html {color:black;background:white;}/* The inner and outer margins usually make the performance positions of each browser style different */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}/* Note that form elements do not inherit parent font*/body,button,input,select,textarea {font:12px SimSun,tahoma,arial,sans-serif;}input,select,textarea {font-size:100%;}/* Remove the margins of each Table cell and make its edges overlap */table {border-collapse:collapse;border-spacing:0;}/* IE bug fixed: th does not inherit text-align*/th {text-align:inherit;}/* Remove the default border*/fieldset,img {border:none;}/* ie6 7 8(q) bug displays as in-line representation*/iframe {display:block;}/* Remove firefox The border of this element */abbr,acronym {border:none;font-variant:normal;}/* Consistent del style*/del {text-decoration:line-through;}address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:500;}/* Remove the identifier before the list, li will inherit */ol,ul {list-style:none;}/* Align is the most important factor in typeface, don't center everything */caption,th {text-align:left;}/* From yahoo, let the title be customized, Adapt to multiple system applications*/h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}q:before,q:after {content:'';}/* Unified superscript and subscript*/sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup {top:-0.5em;}sub {bottom:-0.25em;}/* Let the link display underscore in the hover state*/a:hover {text-decoration:underline;}/* The underscore is not displayed by default, keeping the page concise*/ins,a {text-decoration:none;}/* IE6,7 focus point line removal*/a:focus,*:focus {outline:none;}/* Clear float*/.clearfix:before,.clearfix:after {content:"";display:table;}.clearfix:after {clear:both;overflow:hidden;}.clearfix {zoom:1; /* for IE6 IE7 */}.clear{clear:both;display:block;overflow:hidden;height:0;line-height:0;font-size:0;}/* Set display and hide, usually used to cooperate with JS*/.hide {display:none !important;visibility:hidden;}.block {display:block !important;}/* Set inline to reduce bugs caused by float */.fl {float:left;display:inline;}.fr {float:right;display:inline;}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.