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;
}