jQuery模擬下拉框選擇對應(yīng)菜單的內(nèi)容
先給大家展示下效果圖:
下面一段代碼給大家分享基于jquery實(shí)現(xiàn)的模擬下拉框選擇對應(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>請選擇課程</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)光攝影初級,人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評,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)光攝影初級,人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評,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)光攝影初級,人像攝影及婚紗</span></p><p><span>攝影,產(chǎn)品攝影,重點(diǎn)講解人像寫真與私房攝影,</span></p><p><span>作品點(diǎn)評,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模擬下拉框選擇對應(yīng)菜單的內(nèi)容,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是瀏覽器本地存儲數(shù)據(jù)的地方,其用法不盡相同,今天小編通過本文給大家分享jQuery訪問瀏覽器本地存儲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)事件操作頁面元素動畫效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09Jquery如何使用animation動畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動畫效果改變背景色,需要的朋友可以參考下2020-07-07jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法,涉及jQuery針對頁面元素的獲取及樣式動態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Jquery右下角抖動、浮動 實(shí)例代碼(兼容ie6、FF)
本實(shí)例結(jié)合了jquery+js中的setTimeout函數(shù)實(shí)現(xiàn)了一直浮動在頁面右下解的廣告,有需要的朋友可以參考一下2013-08-08