This article has shared with you the code to implement the tab tab switching effect in native js for your reference. The specific content is as follows
1.html part
<body> <div id="tab"> <div> <ul> <li><a href="#">Current Affairs</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Entertainment</a></li> </ul> </div> <div> <div>Current Affairs</div> <div>Sports</div> <div>Entertainment</div> </div> </body>
2.css part: There are many ways to implement the style part. This is the simple demo I wrote, the css I am the worst at. <...
.tab_menu .selected{background-color:#aaa;} .tab_menu ul{height:30px;} .tab_menu ul li{float:left;list-style:none;width:50px;height:30px;color:#000;border:solid 1px gray;border-bottom:none;text-align:center;line-height:30px;margin-right:3px;} .tab_menu ul li a{text-decoration:none;} .tab_box{width:170px;height:150px;border:solid 1px gray;} .tab_box .hide{display:none;}3. Important js part:
window.onload=function(){ var oTab=document.getElementById('tab'); var aLi=oTab.getElementsByTagName('li'); var oTabBox=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(var j=0;j<aLi.length;j++){ aLi[j].className='';//Cancel menu style aBox[j].className='hide';//Hide all tabDivs } aLi[this.index].className='selected'; aBox[this.index].className=''; } } }This is simple and crude, and it doesn't consider whether tabMenu and tabBox have multiple styles, and not adapting to the project is just a way of thinking. Many places need to be improved. The following is to consider the situation where multiple classes are tagged, but generally there are multiple classes. Now we need to use the skills to remove a certain class and add class.
3.1 Add and delete class in native js.
window.onload=function(){ var oTab=document.getElementById('tab'); var aLi=oTab.getElementsByTagName('li'); var oTabBox=oTab.getElementsByTagName('div')[1]; var aBox=oTabBox.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(var j=0;j<aLi.length;j++){ var aClass=aLi[j].className.split(' ');//Element.className is a string, cut into an array var aClass1=aBox[j].className.split(' ');//Same method gets the box for(var z=0;z<aClass.length;z++){ if(aClass[z]=='selected'){ aClass.splice(z,1);//Use the splice method of the array to delete the found class} } for(var k=0;k<aClass1.length;k++){ if(aClass1[k]=='hide'){ aClass1.splice(k,1); } } aLi[j].className=aClass.join(' ');//All menus remove the selected style aBox[j].className+=' hide';//All boxes hide aBox[this.index].className=aClass1.join(' ');//The current box shows aLi[this.index].className+=' selected';//The current menu adds select style} } } }Personal tests are effective, but they are all a bit messy in one method. Moreover, when there are many classes, efficiency is also a problem, but there shouldn't be many classes == Optimize it in the future. This function is very simple to use jquery.
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.