tabs切换划过的效果
两个按钮，多建一个标签在按钮之前利用animate根据点击按钮的left值进行两个按钮之间的滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.switch_button{
width:120px;
height:30px;
padding:3px;
background:#f9f9f9;
border-radius: 3px;
position: relative;
margin:20px 40px 0 0;
}
.switch_button input,.query_switch input{
display:block;
text-align: center;
line-height: 30px;
border:0;
background:none;
width:60px;
height:30px;
float:left;
position: absolute;
z-index: 9;
cursor: pointer;
font-size:14px;
color:#999;
}
.switch_button input:hover,.query_switch input:hover{
color:#4DA1FF;
}
.switch_button input:focus { outline: none;}
.switch_button .select_B,.query_switch .select_B{
display:block;
position:absolute;
width:60px;
height:30px;
background:#4DA1FF;
top:0;
left:0;
top:3px;
left:3px;
border-radius: 3px;
}
.switch_button .thisWeek{
top:3px;
left:3px;
}
.switch_button .thisMonth{
top:3px;
left:63px;
}
.switch_button input.select_color,.query_switch input.select_color{color:#fff;}
.switch_button .select_color:hover,.query_switch .select_color:hover{color:#fff;}
</style>
</head>
<body>
<div class="switch_button">
<input type="button" class="thisWeek select_color" value="按本周" />
<input type="button" class="thisMonth" value="按本月" />
<i class="select_B"></i>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(".switch_button input").on("click",function(){
$(this).siblings(".select_B").animate({left:$(this).css("left")},"slow");
$(this).addClass("select_color").siblings().removeClass("select_color");
})
</script>
</body>
</html>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
