原生
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 .cur{background:#FFC;} #div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;} </style> </head> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById(‘div1‘); //获取外围的div元素 var aBtn = oDiv.getElementsByTagName(‘input‘); //获取所有的按钮元素 var aDiv = oDiv.getElementsByTagName(‘div‘); //获取选项卡的div for (var i=0; i < aBtn.length; i++) { aBtn[i].index = i; //给每个按钮加上索引值 aBtn[i].onmouseover = function(){ //为每个按钮添加点击事件 for (var i=0; i < aBtn.length; i++) { aBtn[i].className = ‘‘; //将每个按钮去掉cur类 aDiv[i].style.display = ‘none‘; //将所有选项卡隐藏 }; this.className = ‘cur‘; //被点击的按钮添加cur类 aDiv[this.index].style.display = ‘block‘; //对应的选项卡显示出来，关键处：this.index } }; } </script> <body> <div id="div1"> <input type="button" value="1" class="cur" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display: block">1111</div> <div>2222</div> <div>3333</div> </div> </body> </html>
Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 .cur{background:#FFC;} #div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;} </style> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ var aBtn = $(‘#div1‘).find(‘input‘) var aDiv = $(‘#div1‘).find(‘div‘) aBtn.mouseover(function(){ aBtn.removeClass(‘cur‘); aDiv.hide(); $(this).addClass(‘cur‘); aDiv.eq($(this).index()).show(); }) }) </script> <body> <div id="div1"> <input type="button" value="1" class="cur" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display: block">1111</div> <div>2222</div> <div>3333</div> </div> </body> </html>
Jquery另一种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #div1 .cur{background:#FFC;} #div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;} </style> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#div1").find(‘input‘).mouseover(function(){ $("#div1").find(‘input‘).attr(‘class‘,‘‘); $("#div1").find(‘div‘).css(‘display‘,‘none‘); $(this).attr(‘class‘,‘cur‘); $("#div1").find(‘div‘).eq($(this).index()).css(‘display‘,‘block‘); }) }) </script> <body> <div id="div1"> <input type="button" value="1" class="cur" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display: block">1111</div> <div>2222</div> <div>3333</div> </div> </body> </html>
上面两种都是在网上看到的，效果是一样的。是不是因为原生和JQ的混用？希望不是滥用...
JS实现选项卡切换——原生与JQ,布布扣,bubuko.com
原文：http://www.cnblogs.com/super-zhen/p/3756899.html