jquery set用法切换效果

<div class="qie">   <!---切换容器-->
            <div class="tit"><!---切换标题-->
                <h3 onMouseOver="set('qie',1,5)" id="qie1" class="hover">标题1</h3>
                <h3 onMouseOver="set('qie',2,5)" id="qie2">标题2</h3>
                <h3 onMouseOver="set('qie',3,5)" id="qie3">标题3</h3>
                <h3 onMouseOver="set('qie',4,5)" id="qie4">标题4</h3>
                <h3 onMouseOver="set('qie',5,5)" id="qie5">标题5</h3>
            
            </div>
            <div class="cont"><!---切换内容-->
                 <ul>
                         <li id="conqie1">111111111111111111111111</li>
                        <li id="conqie2" style="display:none;">222222222222222222222222</li>
                        <li id="conqie3" style="display:none;">333333333333333333333333</li>
                        <li id="conqie4" style="display:none;">444444444444444444444444</li>
                        <li id="conqie5" style="display:none;">555555555555555555555555</li>
                 
                 
                 </ul>
            
            </div>
</div>
<script>
   function set(name,cursel,n){
       for(i=1;i<=n;i++){
           var menu=document.getElementById(name+i);
       var con=document.getElementById("con"+name+i);
       menu.className=i==cursel?"hover":"";
       con.style.display=i==cursel?"block":"none"
       }
       }

</script>
posted @ 2017-07-06 10:03  安心牧羊人  阅读(1364)  评论(0编辑  收藏  举报