juery 实现选项卡
Posted moon-yyl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了juery 实现选项卡相关的知识，希望对你有一定的参考价值。
<!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 div{width:200px;height:200px;border:1px solid #F00;display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> /*window.onload = function(){ var oDiv = document.getElementById(‘div1‘); var aInput = oDiv.getElementsByTagName(‘input‘); var aDiv = oDiv.getElementsByTagName(‘div‘); alert(aInput.length); for(var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function(){ for(var i=0;i<aInput.length;i++){ aInput[i].className = ‘‘; aDiv[i].style.display = ‘none‘; } aInput[this.index].className = ‘active‘; aDiv[this.index].style.display = ‘block‘; }; } };*/ $(function(){ $(‘#div1‘).find(‘input‘).click(function(){ $(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘);//将所有元素属性去掉 $(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘); $(this).attr(‘class‘,‘active‘); $(‘#div1‘).find(‘div‘).eq($(this).index()).css(‘display‘,‘block‘); }); }); </script> </head> <body> <div id="div1"> <input class="active" type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display:block">111</div> <div>222</div> <div>333</div> </div> </body> </html>
以上是关于juery 实现选项卡的主要内容，如果未能解决你的问题，请参考以下文章