Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

Javascript basic tutorial sliding door effect

How to make a simple sliding door effect

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="javascript">
    function tabChange(obj,id){
      var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
      var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
       for(i=0;i<arrayul.length;i++){
          if(obj==arrayli[i]){
           arrayli[i].className = "cli";
           arrayul[i].className = "";
          }else{
           arrayli[i].className = "";
           arrayul[i].className = "hidden";
          }
       }
    }
</script>
<style type="text/css">
.tabbox {width:310px;height:250px;}
.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
</style>
</head>
<body>
 <div class="tabbox">
  <div class="tabmenu">
   <ul>
    <li onmouseover="tabChange(this,'tabcontent')" class="cli">军事</li>
    <li onmouseover="tabChange(this,'tabcontent')">娱乐</li>
    <li onmouseover="tabChange(this,'tabcontent')">国内</li>
    <li onmouseover="tabChange(this,'tabcontent')">国外</li>
    <li onmouseover="tabChange(this,'tabcontent')">游戏</li>
   </ul>
  </div>
  <div id="tabcontent">
   <ul name="tabul">
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">百度</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">php.cn</a></li>
    <li><a href="#">php 中文网</a></li>
    <li <ul class="hidden">
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">淘宝</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">京东商城</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
    <li><a href="#">php 中文网</a></li>
   </ul>
  </div>
 </div>
</body>
</html>


Continuing Learning
new file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script language="javascript"> function tabChange(obj,id){ var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组 for(i=0;i<arrayul.length;i++){ if(obj==arrayli[i]){ arrayli[i].className = "cli"; arrayul[i].className = ""; }else{ arrayli[i].className = ""; arrayul[i].className = "hidden"; } } } </script> <style type="text/css"> .tabbox {width:300px;height:250px;} .tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;} .tabmenu ul {margin:0;padding:0;list-style-type: none;} .tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;} .tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;} #tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;} #tabcontent ul {margin:0;padding:5px;list-style-type: none;} #tabcontent .hidden {display:none;} </style> </head> <body> <div class="tabbox"> <div class="tabmenu"> <ul> <li onmouseover="tabChange(this,'tabcontent')" class="cli">军事</li> <li onmouseover="tabChange(this,'tabcontent')">娱乐</li> <li onmouseover="tabChange(this,'tabcontent')">国内</li> <li onmouseover="tabChange(this,'tabcontent')">国外</li> <li onmouseover="tabChange(this,'tabcontent')">游戏</li> </ul> </div> <div id="tabcontent"> <ul name="tabul"> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> </ul> <ul class="hidden"> <li><a href="#">百度</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> </ul> <ul class="hidden"> <li><a href="#">php.cn</a></li> <li><a href="#">php 中文网</a></li> <li <ul class="hidden"> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> </ul> <ul class="hidden"> <li><a href="#">淘宝</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> </ul> <ul class="hidden"> <li><a href="#">京东商城</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> <li><a href="#">php 中文网</a></li> </ul> </div> </div> </body> </html>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free Javascript basic tutorial
Free JavaScript basic syntax and basic statement video tutorial
Free Basic video tutorial for getting started with JavaScript
Free Han Shunping 2016 latest javascript basic video tutorial
Free Node.js basic tutorial
Free Ecshop basic tutorial
Free Node.js basic tutorial
Free HTML basic tutorial
Free Servlet basic tutorial
Free Ajax basic tutorial
Free jQuery basic tutorial
Free ReactJS basic video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496480
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)