Js学习之路六 --- 选项卡、innerHTML

来源：互联网发布：元数据丢失可以测试编辑：程序博客网时间：2024/05/22 21:27

没学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>

效果如下：

阅读全文

0 0