jquery菜單切換代碼(jquery寫一個簡單的tab切換)
quot#butquotclickfunction var p1 = $quot#testquotchildren#39optionselected#39val 這就是selected的值 windowlocation=quotahtml?b=quot+p1 將選中的值傳到ahtml中。
點擊展開或隱藏菜單,最好在菜單前加一個圖標(biāo)按鈕,美觀又方便如果想像你這樣實現(xiàn),最好在每一個ul和li加上ID這個ID必須是有規(guī)律的,比如父ID為1_1,子ID1_1_1,用鏈接的點擊事件根據(jù)ID獲取父菜單和子菜單實現(xiàn)改變ulli的display樣式就可以實現(xiàn)展開或隱藏。
每個子菜單都是一個dd節(jié)點,在展開收起的時候會對每個dd執(zhí)行效果看起來就好像百葉窗的效果了如果想把每個菜單項下的子菜單做為一個整體來收放,可以考慮下面的結(jié)構(gòu) 菜單一 菜單一內(nèi)容 菜單二內(nèi)容 菜單三內(nèi)容。
產(chǎn)品的內(nèi)容 案例中心的內(nèi)容 至于class=“content”可以是你自己加上的為了便于jQuery獲取,沒有這個樣式類 documentreadyfunction var tabs = $#39nav a#39var cons = $#39main divcontent#39tabsfirstaddClassquotnowquotshow 默認(rèn)第一個顯示 consfirst。
jquery 代碼documentreadyfunction * 菜單初始化 * quot#main_menu li dlquothidequot#main_menu li,#main_menu ddquotbindquotmouseoverquot, function 頂級菜單項的鼠標(biāo)移入操作 thischildrenquotdlquotsiblingsquotaquotattrquotclassquot, quothover_aquot 賦于一級。
具體代碼如下eachmyOptions, functionindex, option #39#mySelect#39append$#39#39, value optionvalue, text optiontext在此示例中,通過$each方法遍歷myOptions數(shù)組,利用append方法逐個添加選項至元素此過程高效且直觀,簡化了動態(tài)生成Select下拉菜單數(shù)據(jù)的操作。
jquery實現(xiàn)由一級導(dǎo)航菜單到二級滑動顯示效果,并點擊增加背景變化效果,代碼挺簡單的,但是也效果也很好,是非常實用的,也是很流行的菜單樣式 html 1 2 22 22 22 22 3lt。
HTML結(jié)構(gòu)如下 一級菜單項 二級菜單項 一級菜單項 二級菜單項 接著,我們使用jQuery來編寫JavaScript代碼,實現(xiàn)菜單的延遲下拉效果以下是JavaScript代碼function #39navli#39hoverfunction thischildren#39divbox#39stoptrue,truedelay1000slideDown#39500#39,function。
掃描二維碼推送至手機訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。