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


Posted in Javascript onMarch 07, 2017

先给大家展示下效果图:

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;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模拟下拉框选择对应菜单的内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
RequireJs的使用详解
Feb 19 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
详解JS异步加载的三种方式
Mar 07 #Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 #Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 #Javascript
JQuery中Ajax的操作完整例子
Mar 07 #Javascript
js判断手机系统是android还是ios
Mar 07 #Javascript
jQuery设计思想
Mar 07 #Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
You might like
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python实现电子产品商店
2019/02/26 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
后勤主管岗位职责
2014/03/01 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Python打包exe时各种异常处理方案总结
2021/05/18 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电