选择相关的标签（多个标签用分号隔开）

最新推荐文章于 2024-01-04 14:46:15 发布
置顶 Mario_X
最新推荐文章于 2024-01-04 14:46:15 发布
阅读量1.3k
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js css
本文链接：https://blog.youkuaiyun.com/qq_37932911/article/details/82774716
js 同时被 2 个专栏收录
7 篇文章
订阅专栏
css
6 篇文章
订阅专栏
本文提供了一个关于如何选择相关标签、系统配置以及验证输入的详细指南，包括行业标签、功能标签、数据源标签、皮肤标签和综合标签的选择流程。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
1、html
    <div class="w-section">
				<h3>欢迎进入</h3>	
				<div class="section-base">
					<h3>请选择相关的标签并选择系统</h3>
					<div class="section-k">
						<p>（1）请点击选择相关的标签（多个标签用分号隔开） </p>
						 <input type="hidden" name="" id="section_type" value="" />
						 <input type="hidden" name="" class="section_type" value="" />
						 <input type="hidden" name="" class="tool_type" value="" />
						 <input type="hidden" name="" class="section_three" value="" />
						  <input type="hidden" name="" class="section_five" value="" />
						 <div class="section-der">
						 	 <div class="section-g"></div>
							 <div class="section-too"></div>
							 <div class="section-three"></div>
							 <div class="section-five"></div>
						 </div>						
						 <ul class="section-g-ul">
						 	<span>行业标签:</span>
							<li  data-type="1">规划</li>
							<li  data-type="2">市政</li>
							<li  data-type="3">交通</li>
							<li  data-type="4">旅游</li>
							<li  data-type="5">风景</li>	
							<label style="color:red;font-size:12px;margin-top:9px;display: inline-block;">
								只能选择一个标签
							</label>
						</ul>
						<ul class="section-f-ul">
							<span>功能标签:</span>
							<li  data-type="1">搜索</li>
							<li  data-type="2">查询</li>
							<li  data-type="3">分析</li>
							<li  data-type="4">浏览</li>
							<li  data-type="5">工具</li>																		
						</ul>
						<ul class="section-s-ul">
							<span>数据源标签:</span>
							<li  data-type="1">矢量</li>
							<li  data-type="2">影像</li>
							<li  data-type="3">地势</li>
							<li  data-type="4">三维</li>																	
						</ul>
						<ul class="section-j-ul">
							<span>皮肤标签:</span>
							<li  data-type="1">经典</li>
							<li  data-type="2">清新</li>	
							<li  data-type="3">典雅</li>
							<label style="color:red;font-size:12px;margin-top:9px;display: inline-block;">
								只能选择一个标签
							</label>
						</ul>
						<ul class="section-h-ul">
							<span>综合标签:</span>
							<li  data-type="1">1</li>
							<li  data-type="2">2</li>
							<label style="color:red;font-size:12px;margin-top:9px;display: inline-block;">
								只能选择一个标签
							</label>					
						</ul>
					</div>
					<div class="section-l">
						<p>sdfsdf</p>
						<span>
							<input type="text" class=" section-g section-ip" onblur="letter()" value="" name="">		
							<p class="section-log"></p>
							<button class="section-n">验证</button>					
						</span>
					</div>
					<div class="start">
						<input type="submit" class="start-mble" value="开始" />
					</div>
				</div>
			</div>
2、js
     $(function(){			
                //请点击选择相关的标签
                  var arr=[];//文字 
                	arr2=[];//值              
                $(".section-g-ul li").on("click",function(){ 
                	var dataVal=$(this).attr("data-type");
                	$(this).addClass("on").siblings().removeClass("on");               	
                	$("#section_type").val(dataVal);
                	$(".section-g").html($(this).text());              
                });
                 //皮肤标签
                $(".section-h-ul li").on("click",function(){ 
                	var dataVal=$(this).attr("data-type");
                	$(this).addClass("on").siblings().removeClass("on");               	
                	$(".section_three").val(dataVal);
                	$(".section-three").html($(this).text());              
                });
                //综合标签
                $(".section-j-ul li").on("click",function(){ 
                	var dataVal=$(this).attr("data-type");
                	$(this).addClass("on").siblings().removeClass("on");               	
                	$(".section_five").val(dataVal);
                	$(".section-five").html($(this).text());              
                });
             	//功能标签
                var arr3=[];
                $(".section-f-ul li").on("click",function(){ 
                	var dataVal=$(this).attr("data-type");
                    if($(this).hasClass("active")){                        	
                        $(this).removeClass("active");
						arr.splice($.inArray($(this).text(),arr),1);
						arr3.splice($.inArray(dataVal,arr3),1);
						$(".tool_type").val(arr3.sort().join(','));
                        $(".section-too").html(arr.join(','));
                    }else{                     	
                        $(this).addClass("active");                      
                        arr.push($(this).text());
                        arr3.push(dataVal);
                       	$(".tool_type").val(arr3.sort().join(','));
                        $(".section-too").html(arr.join(','));
                    }
                }); 
                //数据源标签
                var arr5=[];
                  $(".section-s-ul li").on("click",function(){ 
                	var dataVal=$(this).attr("data-type");
                    if($(this).hasClass("active")){                        	
                        $(this).removeClass("active");
						arr.splice($.inArray($(this).text(),arr),1);
						arr5.splice($.inArray(dataVal,arr5),1);
						$(".section_type").val(arr5.sort().join(','));
                        $(".section-too").html(arr.join(','));
                    }else{                     	
                        $(this).addClass("active");                      
                        arr.push($(this).text());
                        arr5.push(dataVal);
                       	$(".section_type").val(arr5.sort().join(','));
                        $(".section-too").html(arr.join(','));
                    }
                });        
                //验证
				$(".start-mble,.section-n").on("click",function(){
		   		var indexval=$(".section-ip").val();
		   		if(indexval==""){
		   			letter();
		   		}		 		
		   })
      

            })	
            function letter(){
            	var _this=$(".section-ip");
            	if(_this.val()==""){
					_this.next().text("请输入目录");
					return false;
				}else{
					var hunPhone = /^[a-zA-Z][a-zA-Z0-9]{0,16}$/;
					if(hunPhone.test(_this.val().trim())){
						_this.next().text("");
						return true;
					}else{
						_this.next().text("仅限英文字母和数字，16个字符以内");
						return false;
					}
				}
            }         
		</script>
 3、css
    .section-base{
	position:absolute;
	left:50%;
	transform:translate(-50%,0);
	/*width:700px;
	margin:0 auto;*/
}
.section-base h3{
	padding:0px;
	text-align:left;
	font-size: 16px;
	font-weight:lighter;
    color:#314555;
}
.section-k{
	overflow:hidden;
}
.section-k p{
	padding:20px 0 20px 0;
	font-size: 17px;
	font-weight:700;
	color:#314555;
}
.section-der{
	overflow:hidden;
	width:620px;
	height:30px;
	line-height:30px;
	border:solid 1px #314555;
	border-radius:4px;
	background:#eee;
}
.section-g,.section-too,.section-two,.section-three,.section-five{
	color:#314555;
	padding-left: 10px;
	font-size: 16px;
	font-weight:700;
	float:left;
}
.section-g-ul{
	margin-top:22px;
}
.section-g-ul,.section-f-ul,.section-s-ul,.section-j-ul,.section-h-ul{
	overflow:hidden;
}
.section-g-ul li,.section-f-ul li,.section-s-ul li,.section-j-ul li,.section-h-ul li{
	width:70px;
	height:30px;
	line-height:30px;
	float:left;
	background:#0470a7;
	border-radius:6px;
	margin-right:14px;
	margin-bottom:22px;
	text-align:center;
	font-size:15px;
	font-weight:700;
	color:#fff;
	cursor:pointer;
}
.section-g-ul span,.section-s-ul span,.section-f-ul span,.section-j-ul span,.section-h-ul span{
	float:left;
	width:14%;
	margin: 4px 10px 0 0;
	font-size:15px;
	color: #314555;
}
.section-g-ul li.on ,.section-f-ul li.active,.section-s-ul li.active,.section-h-ul li.on,.section-j-ul li.on{
	background:#405667;
}
.section-f-ul li a{
	color:#fff;
	display:block;
}
.section-l{
	position:relative;
}
.section-l p{
	padding:0 0 20px 0;
	font-size: 17px;
	font-weight:700;
	color:#314555;
}
.section-ip{
	width:500px;
	line-height:30px;
	line-height:30px;
	margin-right: 6px;
	border:solid 1px #314555;
	border-radius:6px;
	background:#eee;
	outline:none;
}
.section-n{
	background:#0470a7;
	outline:none;
	border-radius:6px;
	border:none;
	color:#fff;
	cursor:pointer;
	font-size:16px;
	font-weight:700;
	padding:5px 40px 5px 40px;
}
.start{
	margin-top:28px;
	text-align:center;
}
.start input{
	background:#0470a7;
	outline:none;
	border-radius:6px;
	border:none;
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	padding:5px 28px 5px 28px;
}
.new_group{
	background:#0470a7;
	outline:none;
	border-radius:6px;
	border:none;
	color:#fff;
	font-size:16px;
	margin-right:50px;
	font-weight:700;
	cursor:pointer;
	padding:5px 28px 5px 28px;
}
.section-log{
	position:absolute;
	margin:32px 0 0 0px;
	color:red!important;
	font-size:12px!important;
	font-weight:inherit!important;
}
.w-con h3{
	padding-top:48px;
}