对Tab切换效果的意淫
来源:互联网 发布:淘宝助理图片效验出错 编辑:程序博客网 时间:2024/05/17 08:32
标题是不是有点 俗话说,男人本色,哈哈哈好了不多逼逼了开始今天的主题
我们常见的TAB切换都是中规中矩的,但是项目中用到了这样的切换
嘿嘿,不好意思啊,动画做快了,我描述下吧,就是像一个一个块元素去掉底部标签就是这样子啦
怎么实现这样的效果,Tab切换之无底边效果,我们先来分析下,首先先做一个三个块元素来实现切换
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#big div{ width: 120px; height:40px; background: burlywood; float: left; font-size: 12px; text-align: center; line-height: 40px;}</style></head><body> <div id="big"> <div class="dd"> 今日 </div> <div style="margin-left: 20px;"> 7天 </div> <div style="margin-left: 20px;"> 30天 </div> </div></body></html>
我们使用JQ来实现动态切换
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#big div{ width: 120px; height:40px; background: burlywood; float: left; font-size: 12px; text-align: center; line-height: 40px;}#big .dd{ border-top: 3px solid darkgray; border-left: 3px solid darkgray; border-right: 3px solid darkgray; border-bottom:transparent; //此处代码的边框变成透明}</style></head><body> <div id="big"> <div class="dd"> 今日 </div> <div style="margin-left: 20px;"> 7天 </div> <div style="margin-left: 20px;"> 30天 </div> </div></body></html><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script> $("#big div").click(function(){ $(this).addClass("dd").siblings().removeClass("dd") })</script>
效果
下面我们做一个大div来模拟切换下面的内容
做到这里了坚持下就差最后一步了,我们实现了模拟内容,但是我们发现与上面三个的切换重叠了,我们怎样做到想要的效果呢,很简单我们把切换的大容器层级变高并且做成背景是白色的不就行了(如果不设背景颜色默认是透明的)效果图如下:
完整代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#big {width: 500px;height: 40px;background: white;}#big div {width: 120px;height: 40px;background: white;float: left;font-size: 12px;text-align: center;line-height: 40px;margin-left: 20px;z-index:1;position: relative;}#big .dd {border-top: 3px solid darkgray;border-left: 3px solid darkgray;border-right: 3px solid darkgray;}.new {width: 500px;height: 500px;margin-top:2px;border-top: 1px solid darkgray;}</style></head><body><div id="big"><div class="dd">今日</div><div style="margin-left: 20px;">7天</div><div style="margin-left: 20px;">30天</div></div><div class="new"></div></body></html><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script>$("#big div").click(function() {$(this).addClass("dd").siblings().removeClass("dd")})</script>
最后的小插曲:下班了,我的赶紧走了,要不门卫又该粘人了,赶紧发工资吧,我就剩18了
阅读全文
0 0
- 对Tab切换效果的意淫
- android的Tab切换效果
- Tab切换效果的实现
- tab栏的切换效果
- 回车键的tab效果 切换输入焦点
- Android应用的tab切换效果
- 实现网易新闻的tab切换效果
- jq实现简单的tab切换效果
- js tab切换效果
- tab切换效果
- tab切换效果
- JavaScript - Tab切换效果
- 实现tab切换效果
- Tab栏目切换效果
- Tab切换效果制作
- tab页面切换效果
- 公告栏-tab切换效果
- js效果 tab切换
- [HNOI2001][luogu1128][bzoj1225] 求正整数
- Android界面进出场动画
- NCMS网络频道云管理系统V3
- Android utc时间
- 前端UI框架!~~~
- 对Tab切换效果的意淫
- 约瑟夫环
- UGUI图片资源压缩
- Tomcat初始化方法中如何注入配置文件内容以及获取当前服务器端口号
- ios gitignore
- Delphi实现shell扩展
- 前端基础-03-CSS属性
- mysql双机热备的实现
- Nginx动静分离实现