无论是大型网站还是小型网站，都离不开一个经常用到的选项卡效果，下面用JS和JQ两个方面实现。
JS：
<!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 red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); var aInput = oDiv.getElementsByTagName('input'); var aCon = oDiv.getElementsByTagName('div'); 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 = ''; aCon[i].style.display = 'none'; } this.className = 'active'; aCon[this.index].style.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;">111111</div> <div style="display:block;">222222</div> <div style="display:block;">333333</div> </div> </body> </html>
JQ：
<!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 red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script> $(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;">111111</div> <div style="display:block;">222222</div> <div style="display:block;">333333</div> </div> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
