决战JS - 爱码网

经过这几日的学习，测试和摸索，算是了解了一些关于javascript 的相关知识吧。学习过程中做出了一些小DEMO，现总结一下实现这些DEMO的基本思路，如有不妥或更为简便的方法，还希望大神拍砖，共同进步。代码可直接复制引用。

demo1.选项卡：

在网站中应用选项卡是很多网站必不可少的效果，因为方便，简单，使用。可分块展示不同的内容链接，当鼠标点击不同按钮时，下面的DIV根据不同的点击显示不同的内容。要实现这样的一个选项卡，首先在body--->div中建立几个button按钮，并在下面建立相同个数的div，初始化第一个div（即：使它的display为block）;style初始化div和相应的button;然后写js脚本，根据一般步骤：取元素--->写事件---->测试。在这个案例中，首先得为每个按钮建立索引；将所有的button和div中的样式去除，再用this这个关键字，实现新的样式更换。

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
  <head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <title>choice card</title>
  <style>
   #div1 .active {background:yellow;}
   #div1 div {width:200px;height:200px;background:#CCC;border:1px solid #999;display:none;}  
  </style>

  <script language="javascript">
    window.onload=function()
    {
     var oDiv=document.getElementById('div1');
     var aBtn=oDiv.getElementsByTagName('input');
     var aDiv=oDiv.getElementsByTagName('div');
       
     for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function()
        {
        for(var i=0;i<aBtn.length;i++){
          aBtn[i].className='';
          aDiv[i].style.display='none';
         }
        this.className='active';
        aDiv[this.index].style.display='block';
         };
     }
     };
  </script>
 </head>

 <body>
   <div id="div1">
    <input class="active" type="button" value="aaaa">
    <input type="button" value="bbbb">
    <input type="button" value="cccc">
    <input type="button" value="dddd">
    <div style="display:block;">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>  
</div> 
 </body>
</html>

View Code