最小化DEMO测试代码
最简添加删除class：
- // for test
- function $(id){ return document.getElementById(id); }
- // add or remove class
- $('test1').onclick = function(){
- $('test2').className = /\s*on$/.test($('test2').className) ? 'test_class' : 'test_class on';
- };
最简显示隐藏：
- // for test
- function $(id){ return document.getElementById(id); }
- // display none or block
- $('test1').onclick = function(){
- $('test2').style.display = $('test2').style.display == 'none' ? 'block' : 'none';
- };
最简Tab切换：
- <style>
- ul li{cursor: pointer;}
- div{display: none;}
- .on{border: 1px solid #ddd;}
- .on div{display: block;}
- </style>
- <ul id="x">
- <li>Tab1<div>content1</div></li>
- <li>Tab2<div>content2</div></li>
- <li>Tab3<div>content3</div></li>
- </ul>
- <script type="text/javascript">
- document.getElementById('x').onclick = function(e){
- var w=window.event,t=(e||w).target||w.srcElement,c='className',x=this.x;
- x?x[c]='':0;tthis.x=t;t[c]='on';
- };
- </script>
Via 最小化DEMO测试代码
发布于记忆碎片-网络技术分享 https://huilang.me
文章地址：https://huilang.me/isay/zui-xiao-hua-demo-ce-shi-dai-ma/