tabs切换划过的效果

来源：互联网发布：json socket java 编辑：程序博客网时间：2024/05/16 11:17

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>

阅读全文

0 0