表单实例 查看答案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 <style > * { margin: 0; padding: 0; } body{ font-size: 13px; } table{ text-align: center; margin: 100px auto; border-radius: 10px; overflow: hidden; } thead{ background-color : #008dd0 ; } </style > <body > <table width ="300px" border ="1" cellspacing ="0" > <thead > <tr > <th > <label for ="all" > 全选<input type ="checkbox" id ="all" > </label > </th > <th > hello</th > <th > world</th > </tr > </thead > <tbody > <tr > <td > <input type ="checkbox" > </td > <td > 你好世界</td > <td > 你好世界</td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 你好世界</td > <td > 你好世界</td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 你好世界</td > <td > 你好世界</td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 你好世界</td > <td > 你好世界</td > </tr > </tbody > </table > <script > var main = document .getElementById('all' ); var input = document .querySelector('tbody' ).getElementsByTagName('input' ); main.onclick = function ( ) { console .log(this .checked); for (var i = 0 ; i <= input.length - 1 ; i++) { input[i].checked = this .checked; } } for (var i = 0 ; i <= input.length - 1 ; i++) { input[i].onclick = function ( ) { var flag = true ; for (var i = 0 ; i <= input.length - 1 ; i++) { if (!input[i].checked) { flag = false ; } } main.checked = flag; } } </script >
自定义属性 获取元素的属性 element.属性/elemnet.getAttribute(‘属性’) 自定义属性使用get
获取 设置元素值set
可以修改onclick
为鼠标触碰onmouseover
查看答案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div class ="demo" id ="demo1" index ="temp" > </div > <script > var div = document .querySelector('div' ); console .log(div.id); console .log(div.getAttribute('id' )); console .log(div.getAttribute('index' )); div.id = 'text1' ; console .log(div.id); div.className = 'text2' ; console .log(div.className); div.setAttribute('index' ,2 ); console .log(div.getAttribute('index' )); div.setAttribute('index' ,'footer' ) console .log(div.getAttribute('index' )); </script >
移除属性 div.removeAtribute(‘index’);
tab标签 使用排他思想 使用自定义属性Attribute(‘属性名’,’属性值’) 使用自定义属性获取点击索引号 示例一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 <style > * { margin: 0; padding: 0; } ul { list-style: none; } .tab { width: 500px; height: 300px; margin: 200px auto; border : 1px solid #888 ; border-bottom: 0; border-radius: 10px; overflow: hidden; box-shadow : 1px 1px 3px #888 ; } .tab ul { display: inline-flex; width: 100%; align-items: center; background-color : #ccc ; font-size: 13px; } .tab ul li { text-align: center; flex: 20%; padding: 5px; box-sizing: border-box; border : 1px solid #888 ; border-top: 0; border-left: 0; transition: all .6s; } .tab_con { width: 100%; height: 100%; } .item :nth-child(1) { background :-webkit-linear-gradient(left ,#8b48486c ,#a2aa5579 ,#3655b99a ); } .item :nth-child(2) { background :-webkit-linear-gradient(left ,#4f488b6c ,#5599aa79 ,#b936829a ); } .item :nth-child(3) { background :-webkit-linear-gradient(left ,#8b58486c ,#7655aa79 ,#9db9369a ); } .item :nth-child(4) { background :-webkit-linear-gradient(left ,#488b7a6c ,#55aa9f79 ,#b9a1369a ); } .item :nth-child(5) { background :-webkit-linear-gradient(left ,#48498b6c ,#5577aa79 ,#36b9ae9a ); } .tab ul li :hover { background-color : #12774d ; color: white; } .item { display: none; width: 100%; height: 100%; } </style > <body > <div class ="tab" > <ul class ="tab1" > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > </ul > <div class ="tab_con" > <div class ="item" style ="display:block" > Hello world1</div > <div class ="item" > Hello world2</div > <div class ="item" > Hello world3</div > <div class ="item" > Hello world4</div > <div class ="item" > Hello world5</div > </div > </div > <script > var lis = document .querySelector('.tab1' ).querySelectorAll('li' ); var items = document .querySelector('.tab_con' ).querySelectorAll('.item' ); for (var i = 0 ; i <= lis.length - 1 ; i++) { lis[i].setAttribute('index' , i); lis[i].onclick = function ( ) { var index = this .getAttribute('index' ); console .log(index); for (var i = 0 ; i <= lis.length - 1 ; i++) { items[i].style.display = 'none' ; } items[index].style.display = 'block' ; } } </script >
查看样式图例
示例二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 <style > * { margin: 0; padding: 0; } ul { list-style: none; } .tab { width: 500px; height: 300px; margin: 200px auto; border-top : 1px solid #888 ; border-radius: 10px; overflow: hidden; box-shadow : 1px 1px 3px #888 ; } .tab ul { display: inline-flex; width: 100%; align-items: center; background-color : #ccc ; font-size: 13px; } .tab ul li { text-align: center; flex: 20%; padding: 5px; box-sizing: border-box; border : 1px solid #888 ; border-top: 0; border-left: 0; transition: all .6s; } .tab_con { width: 100%; height: 100%; } .item :nth-child(1) { background :-webkit-linear-gradient(left ,#8b48486c ,#a2aa5579 ,#3655b99a ); } .item :nth-child(2) { background :-webkit-linear-gradient(left ,#4f488b6c ,#5599aa79 ,#b936829a ); } .item :nth-child(3) { background :-webkit-linear-gradient(left ,#8b58486c ,#7655aa79 ,#9db9369a ); } .item :nth-child(4) { background :-webkit-linear-gradient(left ,#488b7a6c ,#55aa9f79 ,#b9a1369a ); } .item :nth-child(5) { background :-webkit-linear-gradient(left ,#48498b6c ,#5577aa79 ,#36b9ae9a ); } .tab ul li :hover { background-color : #12774d ; color: white; } .item { display: none; width: 100%; height: 100%; } </style > <body > <div class ="tab" > <ul class ="tab1" > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > <li > 你好世界</li > </ul > <div class ="tab_con" > <div class ="item" style ="display:block" > Hello world1</div > <div class ="item" > Hello world2</div > <div class ="item" > Hello world3</div > <div class ="item" > Hello world4</div > <div class ="item" > Hello world5</div > </div > </div > <script > var lis = document .querySelector('.tab1' ).querySelectorAll('li' ); var items = document .querySelector('.tab_con' ).querySelectorAll('.item' ); for (var i = 0 ; i <= lis.length - 1 ; i++) { lis[i].setAttribute('index' , i); lis[i].onmouseover = function ( ) { var index = this .getAttribute('index' ); console .log(index); for (var i = 0 ; i <= lis.length - 1 ; i++) { items[i].style.display = 'none' ; } items[index].style.display = 'block' ; } } </script >
查看样式图例