万能滑动门代码
我们在做滑动门的时候往往遇到有时候需要两个门滑动，有时候需要三个，这里给大家一个通用的代码，代码都经过我公司的项目实践，确保可用，若有其他问题，可以联系客服，免费指导交流。
先把这些代码插入<head></head>里面：
<script type="text/javascript">
function setTab(m,n){
var menu=document.getElementById("tab"+m).getElementsByTagName("li");
var div=document.getElementById("tablist"+m).getElementsByTagName("div");
var showdiv=[];
for (i=0; j=div[i]; i++){
if ((" "+div[i].className+" ").indexOf(" tablist ")!=-1){
showdiv.push(div[i]);
}
}
for(i=0;i<menu.length;i++)
{
menu[i].className=i==n?"xinwen":"zhuanti";
showdiv[i].style.display=i==n?"block":"none";
}
}
</script>
然后是body里面的代码：
<div id="tab1">
<ul>
<li onmouseover="setTab(1,0)" class="xinwen"><a href="#">新闻评论</a></li>
<li onmouseover="setTab(1,1)" class="zhuanti"><a href="#">专题报道</a></li>
<li onmouseover="setTab(1,2)" class="zhuanti"><a href="#">热点话题</a></li>
</ul>
<div class="xline"></div>
</div>
<div class="tag_content">
<div id="tablist1">
<div class="tablist block">
<ul>
<li class="maintitle"><h1>这里是新闻栏目的大标题</h1></li>
<li class="title">这里是第一条新闻</li>
<li class="title">这里是第二条新闻</li>
<li class="title">这里是第三条新闻</li>
<li class="title">这里是第四条新闻</li>
</ul>
<div style="height:8px; margin-bottom:5px; border-bottom:dashed 1px #e1e1e1;"></div> <!-- 分割线 -->
<ul>
<li class="title">这里是第一条新闻</li>
<li class="title">这里是第二条新闻</li>
<li class="title">这里是第三条新闻</li>
<li class="title">这里是第四条新闻</li>
<li class="title">这里是第五条新闻</li>
</ul>
</div>
<div class="tablist">
<ul>
<li class="maintitle"><h1>这里是新闻栏目的大标题</h1></li>
<li class="title">那里是第一条新闻</li>
<li class="title">那里是第二条新闻</li>
<li class="title">那里是第三条新闻</li>
<li class="title">这里是第四条新闻</li>
</ul>
<div style="height:8px; margin-bottom:5px; border-bottom:dashed 1px #e1e1e1;"></div> <!-- 分割线 -->