jQuery模拟下拉框选择对应菜单
本文主要介绍了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>
<p class="zn-classreport-tabs">
<p 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>
</p>
<p class="zn-classreport-tabscnt">
<p class="zn-classreport-tabsbox active">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/u149.jpg">
<p 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>
</p>
</p>
<p class="zn-classreport-tabsbox-fr"></p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/goods-index-1.jpg">
<p 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>
</p>
</p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/wifi_04.jpg">
<p 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>
</p>
</p>
</p>
</p>
</p>
<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>相关推荐：
JavaScript实现向select下拉框中添加和删除元素实例分享
以上是jQuery模拟下拉框选择对应菜单的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
wallpaper engine能家庭共享吗
Mar 18, 2024 pm 07:28 PM
请问Wallpaper是否支持家庭共享呢?很遗憾，不能支持哦。尽管如此，我们仍有解决方案。比如，可以用小号购买或先由大号下载好软件和壁纸，然后再更换到小号。简单启动软件是完全没问题的。wallpaperengine能家庭共享吗答：Wallpaper暂不支持家庭共享功能。1、据了解，WallpaperEngine似乎并不适合家庭共享环境。2、为了解决这个困扰，建议您考虑购买全新账号;3、或者先在主账号下载所需软件和壁纸，再切到其他账号。4、只要轻点打开软件，便无碍。5、您可以在上述网页上查看属性“
wallpaper engine怎么设置锁屏壁纸？wallpaper engine使用方法
Mar 13, 2024 pm 08:07 PM
wallpaperengine是常用于设置桌面壁纸的软件，用户在wallpaperengine里可以搜索自己喜欢的图片来生成桌面壁纸，还支持将电脑中的图片添加到wallpaperengine中设置成电脑壁纸。下面就来看看wallpaperengine设置锁屏壁纸的方法吧。 wallpaperengine设置锁屏壁纸教程 1、首先进入软件，然后选择已安装，点击“配置壁纸选项”。 2、单独设置选择完壁纸后需要点击右下方的确定。 3、再去点击上方的设置选和预览。 4、接下来
wallpaper engine看片有病毒吗
Mar 18, 2024 pm 07:28 PM
用户在使用wallpaperengine可以下载各种壁纸，还可以使用动态壁纸，有很多用户不知道wallpaperengine看片有没有病毒，只是视频文件是无法作为病毒的。wallpaperengine看片有病毒吗答：不会。1、只是视频文件是无法作为病毒的。2、只要确保从可信的来源下载视频，并保持电脑的安全防护措施，就可以避免病毒感染的风险。3、应用程序类壁纸是apk格式，apk可能会携带木马病毒。4、WallpaperEngine本身没有病毒，但是创意工坊里的一些应用程序类壁纸可能有病毒。
wallpaper engine的壁纸在哪个文件夹
Mar 19, 2024 am 08:16 AM
用户在使用wallpaper时可以下载各种自己喜欢的壁纸进行使用，有很多用户不知道wallpaper的壁纸在哪个文件夹，用户下载的壁纸存放在content文件夹里。wallpaper的壁纸在哪个文件夹答：content文件夹。1、打开文件资源管理器。2、点击左侧“此电脑”。3、找到“STEAM”文件夹。4、选择“steamapps”。5、点击“workshop”。6、找寻“content”文件夹。
wallpaper engine耗电多吗
Mar 18, 2024 pm 08:30 PM
用户在使用wallpaperengine时可以更改自己的电脑壁纸，有很多用户不知道wallpaperengine耗电多吗，动态壁纸是会比静态壁纸更加耗电一点，但耗得不是很多。wallpaperengine耗电多吗答：不多。1、动态壁纸是会比静态壁纸更加耗电一点，但耗得不是很多。2、开启动态壁纸会增加电脑耗电量，并带走一小小部分内存占用。3、用户不需要担心动态壁纸消耗电比较严重的。
Microsoft Edge浏览器怎么更改字体大小-Microsoft Edge浏览器更改字体大小的方法
Mar 04, 2024 pm 05:58 PM
想必大家对MicrosoftEdge浏览器并不模式，不过你们知道MicrosoftEdge浏览器怎么更改字体大小吗?下面这篇文章就讲述了MicrosoftEdge浏览器更改字体大小的方法，让我们一起去下文好好学习学习吧。首先,找到MicrosoftEdge浏览器双击打开。可以在桌面快捷键、开始菜单或任务栏找到MicrosoftEdge浏览器，并双击打开。其次，打开【设置】界面打开进入到这个浏览器界面，单击左上角【...】标识;双击【设置】，打开进入设置界面。再次，找到并打开【外观】界面鼠标滚动下
wallpaper engine订阅记录在哪
Mar 18, 2024 pm 05:37 PM
请问怎样查看wallpaper订阅记录呢?许多用户在该软件上进行了大量的订阅，但可能不清楚如何查询这些记录。其实，您只需要在软件的浏览功能区进行操作即可。wallpaperengine订阅记录在哪答：在浏览界面。1、请先启动电脑，并进入wallpaper软件。2、找到应用程序左上方的浏览选项卡图标并点击。3、在“浏览”界面中，您将看到各类壁纸及订阅源的总览。4、在右上角的搜索框中输入您想要搜索的关键词。5、依靠搜索结果，你便能找到订阅壁纸的来源信息。6、点击对应的订阅源，即可进入其网页。7、在订
数码宝贝新世纪五选一选哪个
Mar 15, 2024 pm 03:58 PM
数码宝贝新世纪是一款新游戏，历时三年精心打磨，这款游戏承载了大家的年少回忆，计划调整就快要上线了，数码宝贝新世纪五选一选哪个？一起看数码宝贝新世纪五选一宠物推荐。数码宝贝新世纪五选一选哪个大地暴龙兽、海狮兽、狮子兽、仙女兽、向日葵兽推荐大家选择暴龙兽和狮子兽，比较适合配队，不管是前期还是后期都是不错的宠物。活动位置：1、打开qq，前往游戏中心，在里面找到数码宝贝新世纪QQ专属预约活动；2、点击活动，找到入口，即可参与活动，开始选择心仪的伙伴。
