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 相关文章推荐
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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制作新闻系统的思路
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
C#的几个面试问题
2016/05/22 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
中学生家长评语大全
2014/04/16 职场文书
入职担保书怎么写
2014/05/12 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
中学生学习保证书
2015/02/26 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书