JS学习笔记
7.选项卡.html
先清空所有按钮，再为选中的按钮添加样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 div{width: 200px; height: 100px; background: lightgrey; display: none;} .active{background: yellow;} </style> <script> window.onload = function () { var oDiv=document.getElementById('div1'); var aBtn=document.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; //index是自定义属性，但不能再标签里定义，只能在js里定义 aBtn[i].onclick=function () { //this代表当前发生事件的元素，即当前点击的按钮就是this //alert(this.value); for(var j=0;j<aBtn.length;j++) { aBtn[j].className=' '; aDiv[j].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; } }; </script> </head> <body> <input class="active" type="button" value="盲僧" /> <input type="button" value="锤石" /> <input type="button" value="亚索" /> <input type="button" value="纳尔" /> <div id="div1"> <div>Yiku!!!</div> <div>QQQQQQ</div> <div>Suoligeituo!</div> <div>Naer dada!</div> </div> </body> </html>
8.innerHTML
设置标签里的文字，可以往标签里添加带标签的文字，会直接生成相应的HTML元素
9.简易年历.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{background:skyblue;} #tab {height:700px;width:440px;background:gray;margin-left:500px;margin-top:10px;position:absolute;} #tab ul{margin-top:20px;} #tab ul li{list-style:none;height:100px;width:100px;background:black;float:left;margin:10px;text-align:center;border:1px solid #000;color:white;} #tab .active{background:white;color:red;} .text{background:white;height:150px;width:335px;font-size:15px;margin-top:520px;margin-left:50px;position:relative;border:2px solid blue;padding-left:10px;} </style> <script> window.onload=function () { var oDiv=document.getElementById('tab'); var aLi=oDiv.getElementsByTagName('li'); var oTxt=oDiv.getElementsByTagName('div'); var arr=['一月水上公园一日游','二月过山车','三月vr体验','四月跟女朋友出去玩','五月全国人民在家坐月子']; for (var i = 0; i < aLi.length; i++) { aLi[i].index=i+1; aLi[i].onmouseover=function () { for (var i = 0; i < aLi.length; i++) { aLi[i].className=' '; } this.className='active'; oTxt[0].innerHTML='<h2>'+this.index+'月活动</h2><p>'+arr[this.index-1]+'</p>'; }; } }; </script> </head> <body> <div id="tab" class="calendar"> <ul> <li class="acrive"><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FEB</p></li> <li><h2>3</h2><p>MAR</p></li> <li><h2>4</h2><p>APR</p></li> <li><h2>5</h2><p>MAY</p></li> <li><h2>6</h2><p>JUN</p></li> <li><h2>7</h2><p>JUL</p></li> <li><h2>8</h2><p>AUG</p></li> <li><h2>9</h2><p>AEP</p></li> <li><h2>10</h2><p>OCT</p></li> <li><h2>11</h2><p>NOV</p></li> <li><h2>12</h2><p>DEC</p></li> </ul> <div class="text"> </div> </div> </body> </html>