关于js代码复用的问题

Question

<ul class="line-text-head">    <li id="tinyhtmla1" class="tiny-Show" onmousedown="sub(1)" >    &nbsp;&nbsp;标题一</li>    <li id="tinyhtmla2" class="tiny-Show2" onmousedown="sub(2)" >    &nbsp;&nbsp;标题二</li></u><div  id="boxHtmla2"  class="content-subject jumbotron" >   </div><div  id="boxHtmla2"  class="content-subject jumbotron" >   </div><ul class="line-text-head">    <li id="tinyhtmlb1" class="tiny-Show" onmousedown="subb(1)" >  &nbsp;&nbsp;标题一</li>    <li id="tinyhtmlb2" class="tiny-Show2" onmousedown="subb(2)" >    &nbsp;&nbsp;标题二</li></u>    <div  id="boxHtmlb2"  class="content-subject jumbotron" >   </div>    <div  id="boxHtmlb2"  class="content-subject jumbotron" >   </div><script type="text/javascript">function sub(n){             for(i=1;i<=2;i++){         var a=document.getElementById('boxHtmla'+i);         a.style.display="none";     }     var obja=document.getElementById('boxHtmla'+n);     obja.style.display="block";        for (j = 1 ; j<=2 ; j++) {      var border=document.getElementById("tinyhtmla"+j);      border.style.boxShadow="none";     }     var borDer = document.getElementById("tinyhtmla"+n);     borDer.style.boxShadow="0px -2px 0px #ed5565 inset";};   function subb(n){     for(i=1;i<=2;i++){         var a=document.getElementById('boxHtmlb'+i);         a.style.display="none";              }     var obja=document.getElementById('boxHtmlb'+n);     obja.style.display="block";          for (j = 1 ; j<=2 ; j++) {      var border=document.getElementById("tinyhtmlb"+j);      border.style.boxShadow="none";     }     var borDer = document.getElementById("tinyhtmlb"+n);     borDer.style.boxShadow="0px -2px 0px #ed5565 inset";}  ;    </script> 上面的两个js方法是一样的，id不一样，如果我的网页需要10个这个的事件，我怎么只要调用一个可以了，就不用写多个。

Answer 1

用class选择器绑定事件，等你学到jquery就游刃有余了