感想：原生JS和jQuery相比： 1.原生JS是对dom节点直接进行操作，不能使用addClass和removeClass方法，而jQuery是对jQuery对象进行操作 即：$()获取到的是一个对象，而原生JS获取到的是dom节点 2.可以发现，JS的代码更多，for循环使用也更多，效率较低，而jQuery的逻辑很清晰，效率较高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>38-TAB选项卡终极</title> <style> *{ margin: 0; padding: 0; } .box{ width: 440px; height: 298px; border: 1px solid #000; margin: 50px auto; } .nav>li{ list-style: none; width: 110px; height: 50px; background: orange; text-align: center; line-height: 50px; float: left; } .nav>.current{ background: #ccc; } .content>li{ list-style: none; display: none; } .content>.show{ display: block; } </style> <script src="JS_file/jquery-1.12.4.js"></script> <script> // 这样即解决了上个问题，又简写了代码，效率提高 /* $(function () { $(".nav>li").mouseenter(function () { //1.1修改被移入选项卡的背景颜色 $(this).addClass("current"); //1.2还原其他兄弟选项卡的背景颜色,sibling意思是除了当前选中节点的其他全部兄弟节点 $(this).siblings().removeClass("current"); // 1.3获取当前选项卡的索引 var index=$(this).index(); // 1.4根据索引找到对应图片 var $li=$(".content>li").eq(index); // 1.5添加对应图片 $li.addClass("show"); // 1.6隐藏非当前的其他全部图片 $li.siblings().removeClass("show"); }) })*/ //这是原生的JS写的同样实现TAB选项卡的功能 window.onload=function () { //获取第一个ul var oNav=document.getElementsByClassName("nav")[0]; //获取第二个ul var oContent=document.getElementsByClassName("content")[0]; //获取第一个ul的li var aLi1=oNav.getElementsByTagName("li"); //获取第二个li的数组 var aLi2=oContent.getElementsByTagName("li"); //for循环遍历aLi1或者aLi2数组 for (var i=0;i<aLi1.length;i++) { //给每个li添加一个index索引属性,并赋值为i aLi1[i].index=i; //给li绑定移入事件 aLi1[i].onmouseenter=function () { // 移入了之后,做的第一件事是将所有的li的class清空,即全部变黄 for(var j=0;j<aLi1.length;j++) { aLi1[j].className=""; } //移入哪个就给哪个添加class为"current",即变灰 this.className="current"; //然后将所有的图片的class清空,即全部隐藏 for(var k=0;k<aLi2.length;k++) { aLi2[k].className=""; } //将选择的选项卡所对应的图片的class为"show"，即显示该图片 aLi2[this.index].className="show"; } } } </script> </head> <body> <div class="box"> <ul class="nav"> <li class="current">H5+C3</li> <li>jQuery</li> <li>C语言</li> <li>Go语言</li> </ul> <ul class="content"> <li class="show"><img src="images/11.png"></li> <li><img src="images/12.png"></li> <li><img src="images/13.png"></li> <li><img src="images/14.png"></li> </ul> </div> </body> </html>
