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

先给大家展示下效果图：

下面一段代码给大家分享基于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基础、数码调色与常用技巧。
 
     
    
   
  
 
 
 
 
 

以上所述是小编给大家介绍的jQuery模拟下拉框选择对应菜单的内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！