js基础练习一之tab选项卡

最近在学习前端，当然包括js,css,html什么的,在听课时做的一些小练习,记录下来：

实例一：

--Tab选项卡--

<script type="text/javascript">
  window.onload=function(){
  var ali=document.getElementsByTagName("li");
  var adiv=document.getElementsByTagName("div"); 
  var i=0;
  for(i=0;i<ali.length;i++)
  {
   ali[i].index=i;
   ali[i].onclick=function()
   {
    for(i=0;i<ali.length;i++)
    {
     ali[i].className="";
     adiv[i].style.display='none';
    }
       this.className='active';
     //alert("這是第"+ this.index + "個按鈕"); 
       adiv[this.index].style.display='block';
   };
   }
  };
</script>

相应的css,以及div:

<style type="text/css"> ul{ margin:0px; padding:0px; list-style:none;} li{float:left; height:34px; width:80px; line-height:34px; text-align:center; background:#000; color:#F00; border:#CCC solid 1px;} li:hover{ text-decoration:underline; border:#999 solid 1px;} .active {float:left; height:34px; width:80px; line-height:34px; text-align:center; background:#000; color:#CCC; border:#CCC solid 1px;}div{ background:#CCC; margin-left:2px; width:320px; height:200px; border:#333 solid 1px; display:none;}

</style>

<ul>  <li >妙味課堂</li>  <li>妙味茶館</li>  <li>js基礎課堂</li>  <li>更多<<</li> </ul>

<div style="display:block;">妙味課堂</div> <div>妙味茶館</div> <div>基礎課堂</div> <div>更多...</div>

实例二：

--实现全选--

<script type="text/javascript">
 window.onload=function(){
    var cBtn=document.getElementById("btn");
    var ipt=document.getElementsByTagName("input");
      var j=0;
      cBtn.onclick=function(){
    for(var j=0;j<ipt.length;j++){
     ipt[j].checked=true;
      };
       }
  };
</script>

此js未调试还有问题！！

<p id="btn" >全选</p>
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />

总结知识点：

事件提取

if判断

for循环

全选功能

getElementsByTagName

this

给元素添加序号(index)

选项卡

其实这都是最最基础和简单的实例了，打好基础，熟练运用，在以后的强化学习中才能有质的突破。