JavaScript development sliding door tutorial - sliding door effect

Let’s look at the following javascript code, the code is as follows:

<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>

The complete code is as follows

<!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>

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

JavaScript development sliding door tutorial - sliding door effect

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]