JavaScript滑动门源码详解（js+css滑动门详解）
我对js也是只能看懂，也不是太熟悉。现在也是在一直学习。学习js这方面我对大家提一点，就是多写、多看。这样就慢慢好多了。
今天 我给大家分享一个js 滑动门。带注泽的。大家看一下，这是完整的代码：
<html>
<head>
<style>.none{display:none}</style>
</head><script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i==Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<body>
<div class="nvr_a left_gk">
<ul id="myTabd">
<li class="active" onclick="nTabs(this,0);">星期一</li>
<li class="normal" onclick="nTabs(this,1);">星期二</li>
<li class="normal" onclick="nTabs(this,2);">星期三</li>
<li class="normal" onclick="nTabs(this,3);">星期四</li>
<li class="normal" onclick="nTabs(this,4);">星期五</li>
<li class="normal" onclick="nTabs(this,5);">星期六</li>
</ul>
</div>
<div id="myTabd_Content0">1</div>
<div id="myTabd_Content1" class="none left_gk border_l_r">2</div>
<div id="myTabd_Content2" class="none left_gk border_l_r">3</div>
<div id="myTabd_Content3" class="none left_gk border_l_r">4</div>
<div id="myTabd_Content4" class="none left_gk border_l_r">5</div>
<div id="myTabd_Content5" class="none left_gk border_l_r">6</div>
</body>
</html>
在这里我就只说js 部分的html的一看大家都明白了。这段js代码比较简单。但可实现滑动的效果。
function nTabs(thisObj,Num){ //定义函数我就不说了。
if(thisObj.className == "active")return;// li的class的名=“active”就停止执行这个函数
var tabObj = thisObj.parentNode.id; //取值上级父节点的id
var tabList = document.getElementById(tabObj).getElementsByTagName("li"); //取tabObj下面的ii的标签
for(i=0; i <tabList.length; i++) //这是for循环
{
if (i==Num) //判断，如果为真执行下面的源码；
{
thisObj.className = "active"; 改边li扔class的name
document.getElementById(tabObj+"_Content"+i).style.display = "block"; //改变css的值
}else{
tabList[i].className = "normal"; 改边li扔class的name
document.getElementById(tabObj+"_Content"+i).style.display = "none"; //改变css的值
}
}
}
</script>