Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

javascript开发滑动门教程之滑动门效果

下面我们来看以下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="#">规则</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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion Keiner
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492801 spielt ab