JavaScript怎么制作下拉菜單

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript怎么制作下拉菜單，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、嵊泗網(wǎng)絡(luò)推廣、微信小程序、嵊泗網(wǎng)絡(luò)營(yíng)銷(xiāo)、嵊泗企業(yè)策劃、嵊泗品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供嵊泗建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

JavaScript制作下拉菜單的方法：1、利用value屬性獲取下拉菜單的選項(xiàng)；2、根據(jù)選項(xiàng)決定div的狀態(tài)；3、利用style.display樣式隱藏或顯示div即可。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript如何制作下拉菜單？

js下拉菜單制作

一、用js通過(guò)下拉菜單來(lái)實(shí)現(xiàn)div的隱藏和顯示

思路：利用value屬性獲取下拉菜單的選項(xiàng)→根據(jù)選項(xiàng)決定div的狀態(tài)→利用style.display樣式隱藏或顯示div。實(shí)例演示如下：

代碼




  
  
  W3Cschool(w3cschool.cn)


  
    顯示
    隱藏
  
  我是一個(gè)div么呀我是一個(gè)div

效果演示

JavaScript怎么制作下拉菜單

二、鼠標(biāo)滑過(guò)出現(xiàn)下拉菜單的js做法

大致思路如下：先給菜單box定好寬高加上position:relative;再給里面的內(nèi)容定上與之相同的寬高;然后給里面的下拉二級(jí)菜單加上寬度絕對(duì)定位。




  
  
  W3Cschool(w3cschool.cn)
  


  
    
      下拉
      
        下拉1
        下拉2
        下拉3
        下拉4

關(guān)于“JavaScript怎么制作下拉菜單”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前名稱(chēng)：JavaScript怎么制作下拉菜單
當(dāng)前地址：http://m.jiaotiyi.com/article/godohg.html

網(wǎng)站建設(shè)知識(shí)

JavaScript怎么制作下拉菜單

其他資訊