jQuery模擬下拉框選擇對(duì)應(yīng)菜單的內(nèi)容
先給大家展示下效果圖:
下面一段代碼給大家分享基于jquery實(shí)現(xiàn)的模擬下拉框選擇對(duì)應(yīng)菜單的內(nèi)容,具體代碼如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin: 0;padding: 0;} a{text-decoration: none; color: #555;font-size: 23px;} .zn-classreport-tabs{} .zn-classreport-tabstle{ font-size: 16px; position: relative; width: 200px; margin: 15px 20px; line-height: 35px; cursor: pointer; padding: 0px 16px; border: 1px solid #ccc; border-radius: 5px; } .zn-classreport-tabstle>ul{ display: none; position: absolute; top: 36px; left: 0; width: 90%; background: #fff; padding: 10px; border: 1px solid #ccc; } .zn-classreport-tabstle li{ float: left; text-align: center; width: 100%; font-size: 14px; margin-bottom: 4px; } .zn-classreport-tabstle li:hover,.zn-classreport-tabstle li.active{ background-color: #ccc; color: #fff; } .zn-classreport-tabscnt{ float: left; width: 100%; } .zn-classreport-tabsbox{ margin: 10px; display: none; font-size: 16px; } .zn-classreport-tabsbox.active{ display: block; } .zn-classreport-tabsbox img{ width: 350px; } </style> </head> <body> <div class="zn-classreport-tabs"> <div class="zn-classreport-tabstle"> <span>請(qǐng)選擇課程</span> <input type="hidden" name="test_1" class="value" value="" /> <ul class="select"> <li value="1">蒙妮妮攝影班</li> <li value="2">昕麗沖印班</li> <li value="3">寶麗沖印班</li> </ul> </div> <div class="zn-classreport-tabscnt"> <div class="zn-classreport-tabsbox active"> <div class="zn-classreport-tabsbox-fl"> <img class="img " src="upload/images/u149.jpg"> <div class="text"> <p>蒙妮妮攝影班</p> <p><span>課程介紹:</span></p><p><span><br></span></p><p><span>本課程包括攝影基礎(chǔ)、曝光、構(gòu)圖,器材的使用</span></p><p><span>和攝影小技巧,風(fēng)光攝影初級(jí),人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評(píng),PS基礎(chǔ)、數(shù)碼調(diào)色與常用技巧。</span></p> </div> </div> <div class="zn-classreport-tabsbox-fr"></div> </div> <div class="zn-classreport-tabsbox "> <div class="zn-classreport-tabsbox-fl"> <img class="img " src="upload/images/goods-index-1.jpg"> <div class="text"> <p>昕麗沖印班</p> <p><span>課程介紹:</span></p><p><span><br></span></p><p><span>本課程包括攝影基礎(chǔ)、曝光、構(gòu)圖,器材的使用</span></p><p><span>和攝影小技巧,風(fēng)光攝影初級(jí),人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評(píng),PS基礎(chǔ)、數(shù)碼調(diào)色與常用技巧。</span></p> </div> </div> </div> <div class="zn-classreport-tabsbox "> <div class="zn-classreport-tabsbox-fl"> <img class="img " src="upload/images/wifi_04.jpg"> <div class="text"> <p>寶麗沖印班</p> <p><span>課程介紹:</span></p><p><span><br></span></p><p><span>本課程包括攝影基礎(chǔ)、曝光、構(gòu)圖,器材的使用</span></p><p><span>和攝影小技巧,風(fēng)光攝影初級(jí),人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評(píng),PS基礎(chǔ)、數(shù)碼調(diào)色與常用技巧。</span></p> </div> </div> </div> </div> </div> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //報(bào)班系列 $('.zn-classreport-tabs ').each(function(){ var _this = $(this); var cur_tab = false; //當(dāng)前標(biāo)簽 $(_this).find('.zn-classreport-tabstle').each(function(){ var _tlethis = $(this); var select = $(this).find('.select'); var hidden = $(this).find('.value'); var span = $(this).find('span'); $( _tlethis).click(function(){ $(select).show(); }) $(_tlethis).find('ul.select li').each(function(){ $(this).click(function(){ $(hidden).val( $(this).attr('value') ); $(select).hide(); $(span).html($(this).html()); return false; }); }); }); //多標(biāo)簽內(nèi)容處理 $(_this).find('.zn-classreport-tabstle li').click(function(){ if (cur_tab == this) { return true; } now_pos = $(cur_tab).index();//開始的 new_pos = $(this).index();//當(dāng)前的 $(_this).find('.zn-classreport-tabsbox').eq(now_pos).removeClass('active'); $(_this).find('.zn-classreport-tabsbox').eq(new_pos).addClass('active'); $(cur_tab).removeClass('active'); $(this).addClass('active'); cur_tab=this; }); $(_this).find('.zn-classreport-tabstle li').first().click(); }); }); </script> </body> </html>
以上所述是小編給大家介紹的jQuery模擬下拉框選擇對(duì)應(yīng)菜單的內(nèi)容,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jquery模擬SELECT下拉框取值效果
- jQuery 文本框模擬下拉列表效果
- 用jQuery實(shí)現(xiàn)的模擬下拉框代碼
- 用jQuery模擬select下拉框的簡(jiǎn)單示例代碼
- jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- 模擬多級(jí)復(fù)選框效果的jquery代碼
- jquery模擬多級(jí)復(fù)選框效果的簡(jiǎn)單實(shí)例
- jquery 模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話框效果
- jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
相關(guān)文章
jQuery訪問(wèn)瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是瀏覽器本地存儲(chǔ)數(shù)據(jù)的地方,其用法不盡相同,今天小編通過(guò)本文給大家分享jQuery訪問(wèn)瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法,需要的朋友參考下吧2017-10-10jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁(yè)面元素動(dòng)畫效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09Jquery如何使用animation動(dòng)畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動(dòng)畫效果改變背景色,需要的朋友可以參考下2020-07-07jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法,涉及jQuery針對(duì)頁(yè)面元素的獲取及樣式動(dòng)態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動(dòng)態(tài)控制操作技巧,需要的朋友可以參考下2018-09-09Jquery右下角抖動(dòng)、浮動(dòng) 實(shí)例代碼(兼容ie6、FF)
本實(shí)例結(jié)合了jquery+js中的setTimeout函數(shù)實(shí)現(xiàn)了一直浮動(dòng)在頁(yè)面右下解的廣告,有需要的朋友可以參考一下2013-08-08- jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì),全世界排名前100萬(wàn)的網(wǎng)站,有46%使用jQuery,遠(yuǎn)遠(yuǎn)超過(guò)其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。對(duì)于網(wǎng)頁(yè)開發(fā)者來(lái)說(shuō),學(xué)會(huì)jQuery是必要的。因?yàn)樗屇懔私鈽I(yè)界最通用的技術(shù),為將來(lái)學(xué)習(xí)更高級(jí)的庫(kù)打下基礎(chǔ),并且確實(shí)可以很輕松地做出許多復(fù)雜的效果2014-03-03