Tutoriel de porte coulissante de développement JavaScript - effet de porte coulissante
Regardons le code javascript suivant, le code est le suivant :
<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>Le code complet est le suivant
<!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="#">规则</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万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱!</a></li>
<li><a href="#">多行跟进阿里信用贷款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">个人重要信息要管牢！</a></li>
<li><a href="#"> 卖家防范红包欺诈提醒!</a></li>
<li><a href="#">更换收货地址的陷阱！</a></li>
<li><a href="#">注意骗子的技术升级了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益机构淘宝开店攻略!</a></li>
<li><a href="#">走进无声课堂!</a></li>
<li><a href="#">淘宝之行大众评审赢公益金!</a></li>
<li><a href="#">爱心品牌联合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
nouveau fichier
<!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="#">规则</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万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱!</a></li>
<li><a href="#">多行跟进阿里信用贷款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">个人重要信息要管牢！</a></li>
<li><a href="#"> 卖家防范红包欺诈提醒!</a></li>
<li><a href="#">更换收货地址的陷阱！</a></li>
<li><a href="#">注意骗子的技术升级了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益机构淘宝开店攻略!</a></li>
<li><a href="#">走进无声课堂!</a></li>
<li><a href="#">淘宝之行大众评审赢公益金!</a></li>
<li><a href="#">爱心品牌联合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Aperçu
Clear
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
Parlons brièvement de la création d'une entreprise en PHP
Introduction rapide au développement web front-end
Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes
Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]
Vérification de connexion et forum de discussion classique
Collecte de connaissances sur les réseaux informatiques
Démarrage rapide de la version complète de Node.JS
Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]
Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)