先給大家展示下效果圖：
下面一段代碼給大家分享基于jquery實現的模擬下拉框選擇對應菜單的內容，具體代碼如下所示：
<!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>本課程包括攝影基礎、曝光、構圖，器材的使用</span></p><p><span>和攝影小技巧，風光攝影初級，人像攝影及婚紗</span></p><p><span>攝影，產品攝影，重點講解人像寫真與私房攝影，</span></p><p><span>作品點評，PS基礎、數碼調色與常用技巧。</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>本課程包括攝影基礎、曝光、構圖，器材的使用</span></p><p><span>和攝影小技巧，風光攝影初級，人像攝影及婚紗</span></p><p><span>攝影，產品攝影，重點講解人像寫真與私房攝影，</span></p><p><span>作品點評，PS基礎、數碼調色與常用技巧。</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>本課程包括攝影基礎、曝光、構圖，器材的使用</span></p><p><span>和攝影小技巧，風光攝影初級，人像攝影及婚紗</span></p><p><span>攝影，產品攝影，重點講解人像寫真與私房攝影，</span></p><p><span>作品點評，PS基礎、數碼調色與常用技巧。</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(){ //報班系列 $('.zn-classreport-tabs ').each(function(){ var _this = $(this); var cur_tab = false; //當前標簽 $(_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; }); }); }); //多標簽內容處理 $(_this).find('.zn-classreport-tabstle li').click(function(){ if (cur_tab == this) { return true; } now_pos = $(cur_tab).index();//開始的 new_pos = $(this).index();//當前的 $(_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模擬下拉框選擇對應菜單的內容，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
