效果展示
点击后:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.change {
overflow: hidden;
}
.change div {
float: left;
border:1px solid #e3e3e3;
}
.change span {
display: block;
height: 50px;
width: 100px;
text-align: center;
line-height: 50px;
color:#e8e8e8;
}
/* 圆角边框 */
.div1,.div12 {
border-radius: 30px 0 0 30px;
}
.div22,.div2 {
border-radius: 0 30px 30px 0;
}
.div1{
background-color: blue;
}
.div12{
background-color: #fff;
}
.div22{
background-color: blue;
}
.div2{
background-color: #fff
}
</style>
</head>
<body>
<div class="change">
<div class="div1"><span>是</span></div>
<div class="div12" style="display: none;"><span>否</span></div>
<div class="div2"><span>否</span></div>
<div class="div22" style="display: none;"><span>是</span></div>
</div>
</body>
<script>
$(".change div").each(function() {
$(this).click(function() {
$(this).siblings('div').toggle();
$(this).toggle();
});
});
</script>
</html>