最新推荐文章于 2023-01-26 21:39:05 发布

wx_17819660359

最新推荐文章于 2023-01-26 21:39:05 发布

阅读量1k

点赞数

分类专栏： js 文章标签： js ul li

本文链接：https://blog.csdn.net/zrcshendustudy/article/details/79955351

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  <html 
  lang= 
  "en" 
  > 
 
  <head> 
 
  <meta 
  charset= 
  "UTF-8" 
  > 
 
  <title>Document 
  </title> 
 
  <script 
  type= 
  "text/javascript" 
  > 
 
  window. 
  onload= 
  function() 
 
   { 
 
  var 
  ul= 
  document. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  //var lis=ul.getElementsByTagName("li"); 
 
  var 
  lis= 
  ul. 
  children; 
  //所有的li 
 
  lis[ 
  0]. 
  onmouseover= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "block"; 
 
   } 
 
  lis[ 
  0]. 
  onmouseleave= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "none"; 
 
   } 
 
  lis[ 
  1]. 
  onmouseover= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "block"; 
 
   } 
 
  lis[ 
  1]. 
  onmouseleave= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "none"; 
 
   } 
 
  lis[ 
  2]. 
  onmouseover= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "block"; 
 
   } 
 
  lis[ 
  2]. 
  onmouseleave= 
  function() 
 
   { 
 
  var 
  cul= 
  this. 
  getElementsByTagName( 
  "ul")[ 
  0]; 
 
  cul. 
  style. 
  display= 
  "none"; 
 
   } 
 
   } 
 
  < 
  /script> 
 
  <style 
  type= 
  "text/css" 
  > 
 
  #menu li{ 
 
  /* float:left; */ 
 
  background: 
  blue; 
  border-right: 
  solid 
  white 
  1px 
 
   } 
 
  < 
  /style> 
 
  </head> 
 
  <body> 
 
  <ul 
  id= 
  "menu" 
  style= 
  "list-style:none;width:500px" 
  type= 
  "circle" 
  > 
 
  <li>第一章 
 
  <ul 
  style= 
  "width:100px;float:none;display:none" 
  type= 
  "circle" 
  > 
 
  <li>html基础 
  </li> 
 
  <li>java基础 
  </li> 
 
  </ul> 
 
  </li> 
 
  <li>第二章 
 
  <ul 
  style= 
  "list-style:none;width:100px;float:none;display:none" 
  > 
 
  <li>html基础1 
  </li> 
 
  <li>java基础1 
  </li> 
 
  </ul> 
 
  </li> 
 
  <li>第三章 
  <ul 
  style= 
  "list-style:none;width:100px;float:none;display:none" 
  > 
 
  <li>html基础2 
  </li> 
 
  <li>java基础2 
  </li> 
 
  </ul> 
 
  </li> 
 
  </ul> 
 
  <br/> 
 
  </body> 
 
  </html>

wx_17819660359

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js中实现目录的子目录方式

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&gt; wind
复制链接

扫一扫

专栏目录

Js中实现目录的子目录方式