简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> hujung hadapan web> tutorial js> teks badan

JavaScript如何制作下拉菜单

藏色散人
Lepaskan： 2021-07-03 10:01:28
asal
10804 orang telah melayarinya

JavaScript制作下拉菜单的方法：1、利用value属性获取下拉菜单的选项；2、根据选项决定div的状态；3、利用style.display样式隐藏或显示div即可。

JavaScript如何制作下拉菜单

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript如何制作下拉菜单？

js下拉菜单制作

一、用js通过下拉菜单来实现div的隐藏和显示

思路：利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下：

代码

     W3Cschool(w3cschool.cn) 

   
我是一个div么呀我是一个div
Salin selepas log masuk

效果演示

757e7e917c5cd6812d8109ca909b1e3.png

二、鼠标滑过出现下拉菜单的js做法

大致思路如下：先给菜单box定好宽高加上position:relative;再给里面的内容定上与之相同的宽高;然后给里面的下拉 二级菜单加上宽度绝对定位。

     W3Cschool(w3cschool.cn)
Salin selepas log masuk

推荐学习：《javascript高级教程》

Atas ialah kandungan terperinci JavaScript如何制作下拉菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
javascript
sumber：php.cn
Artikel sebelumnya：JavaScript怎么实现验证码倒计时 Artikel seterusnya：JavaScript怎么实现购物车结算
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan Bagaimanakah saya boleh menggunakan Acara Dihantar Pelayan (SSE) untuk menstrim data darip...
daripada 2023-11-11 12:03:23
0
1
497
Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat yang tidak ditentukan (tetapkan 'innerHTML') Saya cuba membuat halaman web menggunakan php, pada elemen kelas "Continuous TextBox&...
daripada 2023-11-08 21:06:09
0
1
278
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Mengapa begitu banyak skrip JavaScript menambahkan nombor rawak pada sesuatu? perlanggaran? Saya telah mempelajari JavaScript sejak kebelakangan ini dan telah melihat banyak contoh p...
daripada 2023-11-04 20:00:04
0
2
296
Kenal pasti had prestasi dalam JavaScript Saya cuba mencari kesesakan dalam Javascript saya. Pada asasnya saya sedang membangunkan s...
daripada 2023-10-31 20:47:17
0
1
229
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！