最小化DEMO测试代码

2014.06.08 2764 人浏览 留言

最简添加删除class:

  1. // for test
  2. function $(id){ return document.getElementById(id); }
  3. // add or remove class
  4. $('test1').onclick = function(){
  5.     $('test2').className = /\s*on$/.test($('test2').className) ? 'test_class' : 'test_class on';
  6. };

最简显示隐藏:

  1. // for test
  2. function $(id){ return document.getElementById(id); }
  3. // display none or block
  4. $('test1').onclick = function(){
  5.     $('test2').style.display = $('test2').style.display == 'none' ? 'block' : 'none';
  6. };

最简Tab切换:

  1. <style>
  2.         ul li{cursor: pointer;}
  3.         div{display: none;}
  4.         .on{border: 1px solid #ddd;}
  5.         .on div{display: block;}
  6. </style>
  7. <ul id="x">
  8.     <li>Tab1<div>content1</div></li>
  9.     <li>Tab2<div>content2</div></li>
  10.     <li>Tab3<div>content3</div></li>
  11. </ul>
  12. <script type="text/javascript">
  13. document.getElementById('x').onclick = function(e){
  14.     var w=window.event,t=(e||w).target||w.srcElement,c='className',x=this.x;
  15.     x?x[c]='':0;tthis.x=t;t[c]='on';
  16. };
  17. </script>

Via 最小化DEMO测试代码

文章地址:http://huilang.me/isay/zui-xiao-hua-demo-ce-shi-dai-ma/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif