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 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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-fpm 参数的深入理解
2013/06/03 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Python continue语句用法实例
2014/03/11 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python删除过期文件的方法
2015/05/29 Python
python构建自定义回调函数详解
2017/06/20 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python实现购物车购物小程序
2018/04/18 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
公务员转正考察材料
2014/02/07 职场文书
经典团队口号大全
2014/06/21 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
飞屋环游记观后感
2015/06/08 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Python sklearn分类决策树方法详解
2022/09/23 Python