蒙妮妮摄影班
课程介绍:
本课程包括摄影基础、曝光、构图,器材的使用
和摄影小技巧,风光摄影初级,人像摄影及婚纱
摄影,产品摄影,重点讲解人像写真与私房摄影,
作品点评,PS基础、数码调色与常用技巧。
时间:2017-05-31 编辑:简简单单 来源:一聚教程网
先给大家展示下效果图:
下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示:
代码如下 | 复制代码 |
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); varcur_tab =false;//当前标签 $(_this).find('.zn-classreport-tabstle').each(function(){ var_tlethis = $(this); varselect = $(this).find('.select'); varhidden = $(this).find('.value'); varspan = $(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()); returnfalse; }); }); }); //多标签内容处理 $(_this).find('.zn-classreport-tabstle li').click(function(){ if(cur_tab ==this) { returntrue; } 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(); }); }); |