jQuery模拟下拉框选择相应菜单的内容

让我先给你看效果图：

下面的代码将与您分享由基于jquery的模拟下拉框选择的相应菜单的内容。具体代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style type=' text/CSS ' body，ul，li，a，p { margin : 0；padd : 0；} a { text-decoration : nonecolor : # 555 font-size : 23px；} .锌类报告-标签{ } .Zn类报表-tab stle { font-size : 16px；相对位置：宽度： 200像素；余量： 15px 20px线高： 35px光标：指针；padding: 0px 16pxborder: 1px固体# cccborder-radius : 5px；} .Zn类报告-tabstleul {显示：无；绝对位置：top : 36pxleft : 0；宽度： 90%;背景# fffpadding : 10pxborder : 1px固体# ccc}。zn-classreport-tabstle li{左侧浮动：文本对齐：中心；宽度： 100%;font-size : 14px保证金-底部： 4px} .锌级报告-tabstle li:悬停，1 .锌级报告-标签:李。活动{底色： # CCCcolor: # fff}。zn-classreport-tabscnt{左侧浮动：宽度： 100%;} .Zn级报表-tabsbox { margin : 10px；显示器：无；font-size : 16px} .锌类报告。活动{显示器： }块；} .锌级报告-tabsbox img {宽度： 350 px}/样式/头体div ' Zn-report-tab ' div ' Zn-report-tab stle ' span请选择课程/span输入类型='隐藏'名称='test_1 '类=“值”值=''/ul类=“选择”li值='1 '蒙妮妮摄影班/li li值='2 '昕丽冲印班/li li值='3 '宝丽冲印班/Li/ul/div \u Zn类报告-tabstnt \u Zn类报告-tabsbox active \u Zn类报告-tabsbox-fl \ u img \ u src \ u http 3360上传/images/u149。jpg \u div \u text \u p蒙妮妮摄影班/p pspan课程介绍：/span/ppspanbr/span/ppspan本课程包括摄影基础、曝光、构图，器材的使用/span/ppspan和摄影小技巧，风光摄影初级，人像摄影及婚纱/span/ppspan摄影，产品摄影，重点讲解人像写真与私房摄影，/span/ppspan作品点评，PS基础、数码调色与常用技巧/span/p/div/div ' Zn类报告-tabsbox-fr '/div/div ' Zn类报告-tabsbox ' div ' Zn类报告-tabsbox-fl ' img ' img ' src=' http :上传/图片/商品-索引-1。jpg ' div ' text ' p昕丽冲印班/p pspan课程介绍：/span/ppspanbr/span/ppspan本课程包括摄影基础、曝光、构图，器材的使用/span/ppspan和摄影小技巧，风光摄影初级，人像摄影及婚纱/span/ppspan摄影，产品摄影，重点讲解人像写真与私房摄影，/span/ppspan作品点评，PS基础、数码调色与常用技巧/span/p/div/div/div \u Zn类报告-tabsbox \u Zn类报告-tabsbox-fl \ u img \ u src \ u http :上传/images/wifi _ 04。jpg \u div \u text \u p宝丽冲印班/p pspan课程介绍：/span/ppspanbr/span/ppspan本课程包括摄影基础、曝光、构图，器材的使用/span/ppspan和摄影小技巧，风光摄影初级，人像摄影及婚纱/span/ppspan摄影，产品摄影，重点讲解人像写真与私房摄影，/span/ppspan作品点评，PS基础、数码调色与常用技巧。

/span/p /div /div /div /div脚本src=' http : js/jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/脚本脚本type='text/javascript' $(文档)。就绪（函数(){ //报班系列$('.锌类报告-标签').每个(function(){ var _ this=$(this)；var cur _ tab=false//当前标签$(_this).查找('。zn-classreport-tabstle ').每个(function(){ var _ tle this=$(this)；var select=$(this).查找('。选择');var hidden=$(this).查找('。值');var span=$(this).find(' span ')；$(_tlethis).单击(函数(){ $(选择)).show()；}) $(_tlethis).查找(' ul.select li ').每个（函数(){ $(此)).单击(函数(){ $(隐藏))。瓦尔($(这个).attr(' value ')；$(选择)。hide()；$(跨度)。html($(this).html())；返回false })；});});//多标签内容处理$(_this).查找('。锌级报告-标签stle Li ').单击(function(){ if(cur _ tab==this){返回true} now_pos=$(cur_tab).index()；//开始的new_pos=$(this).index()；//当前的$(_this).查找('。zn-classreport-tabsbox ').eq(now_pos).移除CLaSS(' active ')；$(_this).查找('。zn-classreport-tabsbox ').eq(新位置).添加CLaSS(' active ')；$(cur_tab).移除CLaSS(' active ')；$(这个)。添加CLaSS(' active ')；cur _ tab=this })；$(_this).查找('。锌级报告-标签stle Li ').第一个()。单击();});});/脚本/正文/html以上所述是小编给大家介绍的jQuery模拟下拉框选择对应菜单的内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！