javascript開發(fā)滑動(dòng)門教程之滑動(dòng)門效果
下面我們來看以下javascript 的代碼，代碼如下：
<script>
window.onload=function(){
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tabCon").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}else{
tabs[i].className="";
divs[i].className="";
}
}
}
}
</script>完整代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color:#000;}
li{float:left;width:75px;height:26px;line-height:26px;text-align:center;list-style:none;padding:0 1px;
border-top:1px solid #eee;}
#tanContainer{
width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;}
#tabCon a{color:#999;}
#tabCon a:hover{color:red;}
#tabCon div {display:none;}
#tabCon div.fdiv {display:block;}
.mod{margin:10px 6px;}
.mod ul li{float:left;width:150px;height:25px;}
.fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;
padding:0;font-weight:bolder;}
.fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;}
</style>
<script>
window.onload=function(){
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tabCon").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}else{
tabs[i].className="";
divs[i].className="";
}
}
}
}
</script>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li class="fli"><a href="#">公告</a></li>
<li><a href="#">規(guī)則</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="tabCon">
<div class="fdiv">
<ul>
<li><a href="#">張勇：要玩快樂的足球!</a></li>
<li><a href="#"> 阿里2000萬馳援災(zāi)區(qū)！</a></li>
<li><a href="#">旅游寶讓你邊玩邊賺錢!</a></li>
<li><a href="#">多行跟進(jìn)阿里信用貸款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">個(gè)人重要信息要管牢！</a></li>
<li><a href="#"> 賣家防范紅包欺詐提醒!</a></li>
<li><a href="#">更換收貨地址的陷阱！</a></li>
<li><a href="#">注意騙子的技術(shù)升級(jí)了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益機(jī)構(gòu)淘寶開店攻略!</a></li>
<li><a href="#">走進(jìn)無聲課堂!</a></li>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金!</a></li>
<li><a href="#">愛心品牌聯(lián)合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金</a></li>
<li><a href="#">愛心品牌聯(lián)合征集</a></li>
<li><a href="#">走進(jìn)無聲課堂</a></li>
<li><a href="#">名公益機(jī)構(gòu)淘寶開店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走進(jìn)無聲課堂</a></li>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金</a></li>
<li><a href="#">愛心品牌聯(lián)合征集</a></li>
<li><a href="#">名公益機(jī)構(gòu)淘寶開店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
