仿中关村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 时,提 ...
随机推荐
- Android Weekly Notes Issue #250
Android Weekly Issue #250 March 26th, 2017 Android Weekly Issue #250. 本期内容: 好几篇关于Android O预览版的文章; JU ...
- 【iOS】7.4 定位服务->3.2 地图框架MapKit 功能2:路线规划(导航)
本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...
- Sass实战 sass官网
Sass实战 sass官网 1.相关视频教程:http://pan.baidu.com/s/1eSl8bUa 1.1我的项目源码:http://pan.baidu.com/s/1dFmqbyp 1.2 ...
- String 类的实现(3)引用计数实现String类
我们知道在C++中动态开辟空间时是用字符new和delete的.其中使用new test[N]方式开辟空间时实际上是开辟了(N*sizeof(test)+4)字节的空间.如图示其中保存N的值主要用于析 ...
- Vijos1523贪吃的九头龙【树形DP】
贪吃的九头龙 传说中的九头龙是一种特别贪吃的动物.虽然名字叫"九头龙",但这只是说它出生的时候有九个头,而在成长的过程中,它有时会长出很多的新头,头的总数会远大于九,当然也会有旧头 ...
- XJOI练习2神奇的供水系统
神奇的供水系统 在游遍神秘岛过程中,Z4发现每一个小岛上都有若干个奇怪的类似小水缸似的立方体,这另到Z4相当迷惑不解!这天晚上,忽然下起了一场大雨,在中心岛小树屋上类似那个圆形石槽中间的小孔中涌出了一 ...
- 在hive中直接对timestamp类型取max报错
之前直接对timestamp类型做max操作, select id,max(updatetime) updatetime from his.tag group by id; 结果查询的结果有的显示为1 ...
- MongoDB数据库安装及配置环境终极教程(windows10系统)
本文是笔者花时间踩坑踩生气了写出来的!转载请注明出处@http://www.cnblogs.com/tim100/!请尊重我的劳动成果!谢谢! 今天,给大家说说在windows10系统下MongoDB ...
- lca最近公共祖先(模板)
洛谷上的lca模板题--传送门 学了求lca的tarjan算法(离线),在洛谷上做模板题,结果后三个点超时. 又把询问改成链式前向星,才ok. 这个博客,tarjan分析的很详细. 附代码-- #in ...
- oracle表空间扩容
oracle在使用中会发现,表空间不足的情况:以下介绍了如何1.查询表空间使用率.剩余量:2.如何扩展表空间容量: 1.表空间容量指标查询 SELECT TABLESPACE_NAME "表 ...