仿中关村win8频道(win8.zol.com.cn)下的tab效果
最近觉得中关村win8频道下的那个Tab效果很好看。
一时兴起就自己做了一个。觉得还蛮不错的,特地来给大家分享一下。以下是相关的HTML页面写法:
<div class="popular">
<ul class="tabs">
<li class="tab-0 active">应用软件</li>
<li class="tab-1">产品推荐</li>
<li class="tab-r"><a href="#">Q&A</a></li>
</ul>
<div class="dairyPopular list">
//应用软件
</div>
<div class="weeklyPopular list">
//产品推荐
</div>
</div>
相关的部署还是在分类出来的两个相同的list类可以自己在CSS里写自己想要的,以上的就不多写CSS给大家了。就靠大家的想像力了,嘿嘿!其实可以做的更好看。下边是JS代码:
$(document).ready(function() {
$('a').attr('target', '_blank'); $('.tabs li').mousemove(function() {
//最右边的tab不进行任何操作
if($(this).hasClass('tab-r')) {
return;
};
//添加当前激活的状态
$(this).siblings().removeClass('active').end()
.addClass('active');
//切换tab
if($(this).hasClass('tab-0')) {
$('.list').hide();
$('.dairyPopular').show();
//也可以写成$(this).parent().nextAll('ul:eq(0)').show();,这样的好处是不必制定特定的class类
} else if($(this).hasClass('tab-1')) {
$('.list').hide();
$('.weeklyPopular').show();
//也可以写成$(this).parent().nextAll('ul:eq(1)').show();,这样的好处是不必制定特定的class类
};
});
});
另外加了这个JS代码后,咱再加个用来做兼容的JQuery文件效果会更好,可以直接调用jquery:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
OK,这样就大功造成了。o(∩_∩)o 哈哈
仿中关村win8频道(win8.zol.com.cn)下的tab效果的更多相关文章
- 南天PR2、PR2E驱动下载,xp,win7,win8,win8.1,win10 32位64位驱动下载安装教程
家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...
- win8或win8.1修改注册表失败的原因
win8 and win8.1 modify the registry need compiled to be different versions according to the os bits.
- 如何在win7、win8、win8.1上安装使用vb6.0
https://jingyan.baidu.com/article/915fc414fdf8fb51384b2062.html如何在win7.win8.win8.1上安装使用vb6.0 如何在win7 ...
- Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)
前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
- Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
- Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果
前言 接着上一期Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件 的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效果 ...
- 仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...
- 解决Win8.1 / Win Server 2012 r2 下安装 Visual Studio 时一直要求重新启动的问题(原创)
注:本文为作者原创文章,转载于引用请注明出处,谢谢. 今天在x64的英文版Windows Server 2012 r2上安装最新版的 Visual Studio 2015 Exterprise 时,提 ...
随机推荐
- PRINCE2有用吗?
PRINCE2项目认证--在欧美国际久负盛名,在国内近来才逐渐为业内人士所了解.PRINCE2认证2007年首入中国,目前国内参加培训并获取认证的专业人士不足五万人,PRINCE2全称为"受 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(三)代码测试>讲了不为和不能两个状态,针对不为,只能自己调整心态了,而对于不能,本文会结合一 ...
- Ubuntu上手动安装Kubernetes
背景 两台Ubuntu16.04服务器:ip分别为192.168.56.160和192.168.56.161.. Kubernetes版本:1.5.5 Docker版本:1.12.6 etcd版本:2 ...
- 大数据测试之hadoop集群配置和测试
大数据测试之hadoop集群配置和测试 一.准备(所有节点都需要做):系统:Ubuntu12.04java版本:JDK1.7SSH(ubuntu自带)三台在同一ip段的机器,设置为静态IP机器分配 ...
- poptest分享计划以及提供的服务
poptest分享计划以及提供的服务 POPTEST致力于测试开发工程师的培养,能让学员经过系统培训后从事自动化测试工作,包括功能自动化.性能自动化.接口自动化以及移动端系统的自动化测试等,由于移动端 ...
- 老李推荐:第6章6节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令队列
老李推荐:第6章6节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令队列 事件源在获得字串命令并把它翻译成对应的MonkeyEvent事件后,会把这些 ...
- H5与Android之间的交互
关于Android与JS网页端的交互,网上有很多教程,刚做这功能,参考了多方资料,最终出来后觉得简单,但是为实现的话有诸多小问题,最终效果如下: 现在简单整理一下:(直接贴代码,注释详细,应该能懂的) ...
- sqoop 操作从hdfs 导入到mysql中语句
将hdfs下/dw/dms/usr_trgt下的文件导入到mysql中test数据库下usr_trgt表中 sqoop-export --connect jdbc:mysql://mysqlDB: ...
- Android报错:WindowManager$BadTokenException: Unable to add window -- window has already been added
很久之前测试通过的代码,现在手机升级了Android7.0后一运行就崩溃,报出这样的错误,具体错误如下: Process: com.example.sho.android_anti_theft, PI ...
- jQuery的发展史
jQuery的发展史,你知道吗? 每天多学一点知识,就少写一行代码2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁. ...