按钮的实现
--添加事件
this的使用
--先清空所有的按钮,在选中当前按钮
内容的实现(div)
--先隐藏所有DIv,再显示"当前"DIv
索引值的使用(假设用index表示)
--什么时候用索引值----需要知道"第几个"的时候
html添加index-----会被FF过滤
js添加index
<!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; background-color:#CCCCCC; display:none; } #div1 .active { background-color:#FFFF00; } </style> <script> window.οnlοad=function() { var oDiv=document.getElementById("div1"); var inputCh=oDiv.getElementsByTagName("input"); var divCh=oDiv.getElementsByTagName("div"); for(var i=0;i<inputCh.length;i++) { inputCh[i].index=i; inputCh[i].οnclick=function() { for(var j=0;j<inputCh.length;j++) { inputCh[j].className=""; divCh[j].style.display="none"; } this.className="active"; divCh[this.index].style.display="block"; } } } </script> </head> <body> <div id="div1"> <input type="button" class="active" value="教育"/> <input type="button" value="体育"/> <input type="button" value="篮球"/> <input type="button" value="足球"/> <div style="display:block">教育div</div> <div>体育div</div> <div>篮球div</div> <div>足球div</div> </div> </body> </html>