JS入门学习,写一个简单的选项卡

时间:2022-08-31 06:27:53

/* 经过昨天一整天的纠结和摸索。总结下学习初期我最致命的几个问题…… 

1、var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞错了 .后不能有空格啥的, E大写这些都还好,Elements 如果是s,后面接的是 className 或者 TagName 。

2、在js中,一定要区分清楚 class 和className ,前面很容易搞混……    

3、遍历 for循环后,操作的对象一般是标签或者class,这是很多个对象,所以 一定要有[]…… !!!  

*/

 

------------------------------------------------正文的html ------------------------------------------------------

 

<!DOCTYPE html>
<html>
<head>
<title>简单的选项卡</title>
<style type="text/css">
  #div1 .active{ background:#FF9; }
  #div1 div{ width:200px; height:200px; border:1px solid #333; background:#CCC; display:none; }
</style>

</head>


<body>
<div id="div1">
  <input class="active" type="button" 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>

<script src="js/xuanxiangka.js"></script>

</body>


</html>

 

------------------------------------------javascript代码 ---------------------------------------------------

//window.onload 以后记住,都把它添上吧,有备无患

window.onload = function() {
  var oDiv = document.getElementById('div1');        //要操作什么量,就把这些都先声明了 
  var oBtn = oDiv.getElementsByTagName('input');
  var aDiv = oDiv.getElementsByTagName('div');
  for(var i=0; i<oBtn.length; i++) {               //for循环,具体操作什么看循环中间的值,oBtn所以是操作4个按钮
    oBtn[i].index = i;                    //赋每个按钮的属性(这里的属性是自定义属性)的值为i
    oBtn[i].onclick = function() {              //对每个按钮添加一个点击的事件
      for(var i=0; i<oBtn.length; i++) {          //继续用for循环,上一个是点击的for循环,这个循环用来操作点击后的后续事件
        oBtn[i].className = '';               //让每个按钮的class名为空
        aDiv[i].style.display = 'none';          //让每个div的style样式的display为none;
      }
    this.className = 'active';                //当前点击(对应onclick)对象的class名为 active
    aDiv[this.index].style.display = 'block';         //aDiv(按钮下的div) this.index(赋了i的,就是说当前点击按钮对应的div) 的样式display为none
    }
  }
}



总结下  今天学到的。 做这样一个选项卡,总的思路就是, 

 

先让所有的都隐藏,再让当前的显示出来~~~~    

 

明天一练,坚持学习, 勤于思考,让自己有所进步和收获~加油