本文主要介绍了jquery模拟下拉框选择对应菜单的内容,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。
先给大家展示下效果图：
下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容，具体代码如下所示：
nbsp;html>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; }
请选择课程
登录后复制 蒙妮妮摄影班 昕丽冲印班 宝丽冲印班
蒙妮妮摄影班
课程介绍：
本课程包括摄影基础、曝光、构图，器材的使用
和摄影小技巧，风光摄影初级，人像摄影及婚纱
摄影，产品摄影，重点讲解人像写真与私房摄影，
作品点评，PS基础、数码调色与常用技巧。
昕丽冲印班
课程介绍：
本课程包括摄影基础、曝光、构图，器材的使用
和摄影小技巧，风光摄影初级，人像摄影及婚纱
摄影，产品摄影，重点讲解人像写真与私房摄影，
作品点评，PS基础、数码调色与常用技巧。
宝丽冲印班
课程介绍：
本课程包括摄影基础、曝光、构图，器材的使用
和摄影小技巧，风光摄影初级，人像摄影及婚纱
摄影，产品摄影，重点讲解人像写真与私房摄影，
作品点评，PS基础、数码调色与常用技巧。
$(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(); }); });
相关推荐：
JavaScript实现向select下拉框中添加和删除元素实例分享
jQuery使用EasyUi实现三级联动下拉框效果实例分享
jQuery实现select下拉框获取当前选中的文本
以上就是jQuery模拟下拉框选择对应菜单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789485.html
