Js学习之路六 --- 选项卡、innerHTML_用innerhtml 添加选项卡-CSDN博客

没学js之前，就一直听一个前端相对较牛B的逗比说，选项卡学会了，js就上道了。。。吧啦吧啦。。。今天终于学到了一个简版的选项卡功能，也贴出来让学习js的小伙伴们上道一下！

效果图：

代码如下：

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>简版选项卡</title>
           <style type="text/css">
           #div1 div {
            width: 200px;
            height: 100px;
            border:1px solid #999;
            display: none;
            margin: 10px;
           }
           #div1 .active {background: green;}
           </style>
     </head>
     <body>
     <div id="div1">
      <input value="第一" class="active" type="button" id="btn1">
      <input value="第二" type="button" id="btn2">
      <input value="第三" type="button" id="btn3">
      <input value="第四" type="button" id="btn4">
      <div style="display:block;">111111</div>
      <div>222222</div>
      <div>333333</div>
      <div>444444</div>
     </div>
     </body>
     
     <script type="text/javascript"> 
      window.onload = function(){
        var sDiv = document.getElementById('div1');
        var Btn = sDiv.getElementsByTagName('input');  //input数组
        var Div = sDiv.getElementsByTagName('div');   //div数组
        for (var i = 0; i < Btn.length; i++) {
          Btn[i].index = i;
          //自定义属性  html添加index  会被浏览器过滤掉，因此用js添加
          Btn[i].onclick = function(){
            for (var i = 0; i < Btn.length; i++) {
              Btn[i].className = '';
              Div[i].style.display = 'none';
            }
            //清空所有按钮的选中样式 隐藏所有div
            this.className = 'active';
            Div[this.index].style.display = 'block';
            //给当前的按钮加上选中样式 显示对应的div
          }
        }

      }
     </script>
</html>

此js里面最不好理解的是自定义属性 index，这个属性是自己随意定义的一个属性。为什么要定义它？因为input 要找到所对应的 div需要找一个对应值来关联，不然我们不知道哪个input对应哪个div，通过数组我们知道这两个数组的下标值对应相等，因此我们只需要将所选择input的下标值赋给我们所定义的自定义属性就可以实现相互关联了！

------------------------------------------------------------------------------------------------------------------------------------------------

js里还有一个比较常用的DOM属性： innerHTML ，用于属性设置或返回表格行的开始和结束标签之间的 HTML。

在此写一个小例子：实现效果：将input框中输入的文字放置于div中！

代码：

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>innerHTML</title>
           <style type="text/css">
           #div1 {
            width: 200px;
            height: 100px;
            border:1px solid #999;
            display: block;
            margin: 10px;
           }
           </style>
     </head>
     <body>
      <input  type="text" id="txt1">
      <input value="设置文字"  type="button" id="btn1">
      <div id="div1">
      </div>
     </body>
     <script type="text/javascript"> 
      window.onload = function(){
        var Txt = document.getElementById('txt1');
        var Btn = document.getElementById('btn1');
        var Div = document.getElementById('div1');

        Btn.onclick = function(){
          Div.innerHTML = Txt.value; //将input中的值放置到div中
        }
      }
     </script>
</html>

效果如下：