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

最新推荐文章于 2021-01-13 00:29:38 发布

面条请不要欺负汉堡

最新推荐文章于 2021-01-13 00:29:38 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：模拟下拉框选择对应菜单的内容多标签处理内容 jq模拟下拉框选择对应菜单的内容模拟下拉框

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/60750826

jquery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的课程选择器设计，该选择器通过下拉菜单的形式让用户可以选择不同的摄影课程，并展示相应的课程图片和介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

如果有更好的方式，欢迎大家一起探讨！吐舌头