关于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就游刃有余了