cari

Rumah >hujung hadapan web >tutorial js >JavaScript melaksanakan paparan dan menyembunyikan kemahiran menu lungsur_javascript

JavaScript melaksanakan paparan dan menyembunyikan kemahiran menu lungsur_javascript

WBOY
WBOYasal
2016-05-16 15:21:511518semak imbas

Dalam artikel ini, kami akan menggunakan skrip JavaScript untuk memaparkan dan menyembunyikan menu lungsur. Pengetahuan yang perlu kami laksanakan menggunakan kaedah JavaScript ialah:
1) Acara JS: acara hantaran tetikus onmouseover dan acara keluar tetikus onmouseout.
2) Sintaks asas JS: Gunakan kata kunci fungsi untuk mentakrifkan fungsi.
3) Pengaturcaraan DOM: kaedah getElementsByTagName().
Kemudian langkah seterusnya ialah proses pengeluaran kami:
1) Sembunyikan menu kedua: Tetapkan gaya CSS untuk menyembunyikan menu kedua.
2) Tulis fungsi showsub() untuk memaparkan submenu: gunakan getElementsByTagName untuk mendapatkan item menu sekunder;
3) Tulis fungsi hidesub() submenu tersembunyi: gunakan getElementsByTagName untuk mendapatkan item menu sekunder;
4) Tambah acara tetikus: Tambahkan acara tetikus ke menu peringkat pertama dengan menu peringkat kedua, dan panggil fungsi showsub()/hidesub() untuk merealisasikan paparan dan penyembunyian menu peringkat kedua apabila tetikus melalui menu peringkat pertama.
5) Lakukan ujian keserasian pelayar, sekurang-kurangnya lima pelayar. IE7,8,9, Firefox, Google, pelayar 2345, dsb.

Rendering:

Kod HTML: 

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>下拉菜单</title> 
<!--引入的外部CSS样式文件--> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引入的外部JS脚本文件--> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
 <ul> 
  <li><a href="#">网站首页</a></li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> 
  <ul> 
   <li><a href="#">JavaScript</a></li> 
   <li><a href="#">jQuery</a></li> 
   <li><a href="#">Ajax</a></li> 
  </ul> 
  </li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> 
  <ul> 
   <li><a href="#">视频学习</a></li> 
   <li><a href="#">案例学习</a></li> 
   <li><a href="#">交流平台</a></li> 
  </ul> 
  </li> 
  <li><a href="#">经典案例</a></li> 
  <li><a href="#">关于我们</a></li> 
 </ul> 
</div> 
</body> 
</html> 
</span>

Kod fail style.css helaian gaya CSS luaran: 

<span style="font-size:18px;">/*CSS全局设置*/ 
*{ 
 margin:0; 
 padding:0; 
} 
.nav{ 
 background-color:#EEEEEE; 
 height:40px; 
 width:450px; 
 margin:0 auto; 
} 
ul{ 
 list-style:none; 
} 
ul li{ 
 float:left; 
 line-height:40px; 
 text-align:center; 
} 
a{ 
 text-decoration:none; 
 color:#000000; 
 display:block; 
 width:90px; 
 height:40px; 
} 
a:hover{ 
 background-color:#666666; 
 color:#FFFFFF; 
} 
ul li ul li{ 
 float:none; 
 background-color:#EEEEEE; 
} 
ul li ul{ 
 display:none; 
} 
/*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/ 
ul li ul li a:link,ul li ul li a:visited{ 
 background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
 background-color:#009933; 
} 
</span>

Kod fail script.js skrip JS luaran: 

<span style="font-size:18px;">function showsub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="block"; 
} 
function hidesub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="none"; 
}</span>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang dan mencapai kesan menu lungsur.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci muktamad prototaip JavaScript dan kemahiran chains_javascript prototaipArtikel seterusnya：Penjelasan terperinci muktamad prototaip JavaScript dan kemahiran chains_javascript prototaip

Artikel berkaitan

Lihat lagi