<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(#A1E6E9 0%, #fff 100%) no-repeat;
min-height: 400px;
}
.wrap {
width: 500px;
margin: 30px auto;
background: #fff;
border-radius: 4px;
box-shadow: 0, 0, 10px #5ab1fd;
padding: 30px;
}
.types .active {
line-height: 32px;
border: 2px solid #de4965
}
.selects {
padding: 40px 0 0 0;
}
a {
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
color: #5ab1fd;
border: 2px solid #5ab1fd;
padding: 0 25px;
cursor: pointer;
}
.selects a{
display:inline-block;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid #d7d7d7;
padding: 0 25px;
position: relative;
}
.selects .active{
border:2px solid #5AB1FD;
color:#5AB1FD;
}
.select1 .active:after{
content:"√";
color:#fff;
line-height:20px;
height:20px;
width:20px;
border-radius:50%;
background:#5AB1FD;
position:absolute;
right:-5px;
top:-5px;
}
.select2 .active:after{
content:"√";
color:#fff;
line-height:20px;
height:15px;
width:15px;
background:linear-gradient(to right bottom,#fff 0%, #fff 50%, #5AB1FD 50%, #5AB1FD 100%) no-repeat;
position:absolute;
right:0px;
bottom:0px;
padding:2px 0 0 8px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="types">
<a class="active">单选</a>
<a>多选</a>
</div>
<div class="content">
<div class="selects select1">
<a class="active">男</a>
<a >女</a>
<a >保密</a>
</div>
<div class="selects select2" style="display:none">
<a class="active">呆萌小姐姐</a>
<a>吃货小姐姐</a>
<a>逗比小姐姐</a>
<a>最美小姐姐</a>
</div>
</div>
</div>
<script>
var types = document.getElementsByClassName(‘types‘)[0].getElementsByTagName(‘a‘);
var selects = document.getElementsByClassName(‘selects‘);
var select1 = selects[0].getElementsByTagName(‘a‘);
var select2 = selects[1].getElementsByTagName(‘a‘);
//单选多选切换
for(var i=0;i<types.length;i++){
types[i].index = i;//通过序号将index属性存起来
types[i].onclick = function(){
var index = this.index;
for(var j=0;j<types.length;j++){
types[j].className=‘‘;
selects[j].style.display=‘none‘ // 选择框隐藏
}
types[index].className = ‘active‘;
selects[index].style.display = ‘block‘
}
}
// 单选
for(var i=0;i<select1.length;i++){
select1[i].index=i;
select1[i].onclick=function(){
var index=this.index;
for(var j=0;j<select1.length;j++){
select1[j].className=‘‘
}
select1[index].className=‘active‘
}
}
// 多选
for(var i=0;i<select2.length;i++){
select2[i].index = i;
console.log(11)
select2[i].onclick=function(){
var index=this.index;
if(this.className==‘active‘){
this.className=‘‘
}else{
this.className=‘active‘
}
// this.className = this.className ? "" : "active";
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yang656/p/9798720.html
时间： 2024-10-19 19:57:00