简洁js滑动门选项卡切换效果

简洁滑动门切换显示特效，可自己设置鼠标滑过切换或者点击切换方式，结合自己的需求来修改即可。

<STYLE type=text/css>BODY {
    FONT-SIZE: 12px
}
#www_wuming_ren {
    BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #efefef 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #efefef 1px solid; WIDTH: 250px;height:200px; PADDING-TOP: 1px; BORDER-BOTTOM: #efefef 1px solid; over-flow: hidden
}
#www_wuming_ren H4 {
    FONT-SIZE: 12px; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 25px; HEIGHT: 30px; TEXT-ALIGN: center; over-flow: hidden
}
#www_wuming_ren H4.wuming_ren_2 {
    FONT-WEIGHT: normal; BACKGROUND: #ccc; COLOR: #333333
}
#www_wuming_ren H4.wuming_ren_1 {
    FONT-WEIGHT: bold; BACKGROUND:#000; COLOR: #ffffff;cursor:pointer
}
#www_wuming_ren DIV.slidingList_none {
    DISPLAY: none
}
#www_wuming_ren DIV.slidingList {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px; HEIGHT: 150px
}
#www_wuming_ren DIV.slidingList UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#www_wuming_ren DIV.slidingList LI {
    LINE-HEIGHT: 20px; HEIGHT: 20px
}
#www_wuming_ren DIV.slidingList LI SPAN {
    PADDING-RIGHT: 8px; PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ffffff
}
#www_wuming_ren DIV.slidingList LI.one {
    BACKGROUND: url( ) no-repeat
}
#www_wuming_ren DIV.slidingList LI.two {
    BACKGROUND: url( ) no-repeat
}
</STYLE>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<DIV id=www_wuming_ren>
<SCRIPT language=javascript>
  function switchmodTag(modtag,modcontent,modk) {
    for(i=1; i <4; i++) {
      if (i==modk) {
        document.getElementById(modtag+i).className="wuming_ren_1";document.getElementById(modcontent+i).className="slidingList";}
      else {
        document.getElementById(modtag+i).className="wuming_ren_2";document.getElementById(modcontent+i).className="slidingList_none";}
    }
  }
</SCRIPT>
<H4 class=wuming_ren_1 id=mod1 onmouseover=switchmodTag('mod','slidingList','1');this.blur();>武鸣人一号</H4>
<H4 class=wuming_ren_2 id=mod2 onmouseover=switchmodTag('mod','slidingList','2');this.blur();>武鸣人二号</H4>
<H4 class=wuming_ren_2 id=mod3 onmouseover=switchmodTag('mod','slidingList','3');this.blur();>武鸣人三号</H4>
<DIV class=slidingList id=slidingList1>
<UL>
<LI class=one><SPAN>1</SPAN><A href="#">武鸣人网一号信息</A> </LI>
</UL></DIV>
<DIV class=slidingList_none id=slidingList2>
<UL>
<LI class=one><SPAN>1</SPAN><A href="#">武鸣人网二号信息</A>
</UL></DIV>
<DIV class=slidingList_none id=slidingList3>
<UL>
<LI class=one><SPAN>1</SPAN><A href="#">武鸣人网三号信息</A>
</UL>
</DIV>
</DIV>
<P>说明：如果需要点击切换的话，将onmouseover改成onclick即可</P>