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

2024-09-27 22:09:45

先给大家展示下效果图：

下面一段代码给大家分享基于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模拟下拉框选择对应菜单的内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jquery模拟SELECT下拉框取值效果

jquery模拟SELECT框,效果图如下: 复制代码代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty
用jQuery实现的模拟下拉框代码

很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框. 问题1:为什么要模拟下拉框? 1,浏览器自带的下拉框样式不好看. 2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面. OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框. 第一步:先搭建好结构这是普通的下拉框代码: XML/HTML代码复制代码代码如下: <select name="abc" id="abc"> <optio
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri
jQuery Select下拉框操作小结(推荐)

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_
JQuery导航菜单选择特效

一.实现效果 1.初始化效果:未添加样式和特效 2.添加CSS样式 3.最终效果二.JQuery代码  <script type="text/javascript"> $(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //给当前元素添加current样式
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态把以下代码放在一个单独的js文件中,在页面上引用即可调用复制代码代码如下: //获取cookie值function readCookie(name) { var cookieValue = ""; var search = name + "="; if (document.cookie.length > 0) {
基于jQuery的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
jQuery实现非常实用漂亮的select下拉菜单选择效果

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
基于jquery实现的可以编辑选择的下拉框的代码

效果图: 代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>
jQuery模拟下拉框选择对应菜单的内容

先给大家展示下效果图: 下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin
jQuery实现下拉框选择图片功能实例

本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery
jQuery+jsp下拉框联动获取本地数据的方法(附源码)

本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法.分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量.(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ez
jQuery设置下拉框显示与隐藏效果的方法分析

本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素. $("select").hide(); // 隐藏下拉框 $("select").show(); // 显示下拉框 $("select").togg
jQuery实现下拉框多选 jquery-multiselect 的实例代码

先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
基于jQuery实现下拉框

项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码代码如下: $(function(){ $('#add').click(function(){ var $options = $('#select1 option:selected'); $options.a
BootStrap中关于Select下拉框选择触发事件及扩展

Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

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

相关推荐

随机推荐