tab_切换
记忆：
一.这里用到了jQuery遍历---filter()方法；
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
二.HTML DOM hash属性
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
可能会出现的形式：
this.hash：获取当前链接的标签值；
location.hash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* -- x.x Clear -- */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both }
.clearfix { zoom: 1 } body{font-size:13px;}
.grid-4 {
width: 300px;
}
/* -- 12.8 Tabbed -- */
.tabs { margin: 0 0 20px 0; display: block; }
.tabs ul.nav { list-style: none; margin: 0; padding: 0; }
.tabs ul.nav li { float: left; position: relative; margin: 0; z-index: 10; padding: 0; margin: 0 0 -1px 0; border: 1px solid transparent; border-bottom-color: #e8e8e8; }
.tabs ul.nav li a { color: #333; text-decoration: none; font-weight: bold; display: block; overflow: hidden; }
.tabs ul.nav li a:hover { color: #09c; }
.tabs ul.nav li.active { background: #fff; border: 1px solid #e8e8e8; border-bottom-color: #fff !important; }
.tabs .tab { background: #fff; border: 1px solid #e8e8e8; padding: 20px 12px 20px 12px; }
.tabs ul.nav li.active a { color: #09c; }
.tabbed_widget .nav { font-family: "Microsoft YaHei", 'Myriad Pro','Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.tabbed_widget ul { margin: 0; }
.tabbed_widget li { list-style: none; padding-bottom: 5px; margin-bottom: 5px; margin-left: 0; width: auto; }
.tabbed_widget li:last-child { padding-bottom: 0px; border-bottom: 0; margin-bottom: 0; }
.tabbed_widget ul.nav li a { display: block; padding: 10px; background: none; text-indent: 0; width: auto; outline: none;}
.tabbed_widget ul.nav li.active a, .tabbed_widget ul.nav li a:hover { background: none; } .tabbed_widget #tab1 a, .tabbed_widget #tab2 a{ font-size: 13px; text-transform: none; text-decoration: none; color: #333; font-weight: normal; }
.tabbed_widget #tab3 a{font-weight: normal;}
.tabbed_widget #tab1 a:hover, .tabbed_widget #tab2 a:hover, .tabbed_widget #tab3 a:hover {color: #0099cc; } .tabbed_widget ul.nav li.active a,
.tabbed_widget ul.nav li.active a:hover,
.tabbed_widget ul.nav li a,
.tabbed_widget ul.nav li a:hover{
background: none!important;
}
</style>
</head>
<body>
<div class="grid-4">
<div class="tabs tabbed_widget">
<ul class="nav clearfix">
<li class="active"><a id="link-tab1" href="#tab1" title="本周热门文章">本周热门文章</a>
</li><li class=""><a id="link-tab2" href="#tab2" title="本月热门文章">本月热门文章</a></li>
<li class=""><a id="link-tab3" href="#tab3" title="热门标签">热门标签</a></li>
</ul>
<div id="tab1" class="tab">
<div class="floated-thumb">
<div class="post-meta no-thumb"> <p>
<span class="numb">0</span>
<a class="meta-title" target="_blank" href="#" title="111">111</a><br>
</p> </div>
<div class="clear"></div>
<div class="post-meta no-thumb">
<p>
<span class="numb">1</span>
<a class="meta-title" target="_blank" href="#" title="222">222</a><br>
</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="tab2" class="tab">
<div class="floated-thumb">
<div class="post-meta no-thumb">
<p>
<span class="numb">0</span>
<a class="meta-title" target="_blank" href="#" title="333">333</a><br>
</p>
</div>
<div class="clear"></div>
<div class="post-meta no-thumb">
<p>
<span class="numb">1</span>
<a class="meta-title" target="_blank" href="#" title="444">444</a><br>
</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="tab3" class="tab">
<!--<div class="floated-thumb">-->
<!--<div class="post-meta no-thumb">-->
<!--<p>-->
<!--<span class="numb">0</span>-->
<!--<a class="meta-title" target="_blank" href="#" title="555">555</a><br>-->
<!--</p>-->
<!--</div>-->
<!--<div class="clear"></div>-->
<!--<div class="post-meta no-thumb">-->
<!--<p>-->
<!--<span class="numb">1</span>-->
<!--<a class="meta-title" target="_blank" href="http://blog.jobbole.com/92115/" title="666">666</a><br>-->
<!--</p>-->
<!--</div>-->
<!--<div class="clear"></div>-->
<!--</div>-->
<p>
<a href="#">缴费单</a>
<a href="#">高光</a>
<a href="#">java</a>
<a href="#">看看</a>
</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
var b = $('.tabs .tab');
b.hide().filter(':first').show();
$('.tabs .nav a').click(function() {
b.hide();
b.filter(this.hash).show();//this.hash：获取当前链接的标签值
$('.tabs .nav li').removeClass('active');
$(this).parent().addClass('active');
return false
}).filter(':first').click();
</script>
仿 WEB前端---伯乐在线 ：http://web.jobbole.com
tab_切换的更多相关文章
- JS 图片切换
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="zzzz.aspx.cs&quo ...
- 可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目
最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目 最近一个来自重庆的客户找到走起君,客户的业务是做移动互联网支付,是微信支付收单渠道合作伙伴,数据库里存储的是支付流水和交易流水 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- Partition：分区切换（Switch）
在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...
- Android注解使用之注解编译android-apt如何切换到annotationProcessor
前言: 自从EventBus 3.x发布之后其通过注解预编译的方式解决了之前通过反射机制所引起的性能效率问题,其中注解预编译所采用的的就是android-apt的方式,不过最近Apt工具的作者宣布了不 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
随机推荐
- WinAPI: ShellExecute - 打开外部程序或文件
WinAPI: ShellExecute - 打开外部程序或文件 ShellExecute( hWnd: HWND; {指定父窗口句柄} Operation: PChar; { ...
- ACM/ICPC 之 DFS求解欧拉通路路径（POJ2337）
判断是欧拉通路后,DFS简单剪枝求解字典序最小的欧拉通路路径 //Time:16Ms Memory:228K #include<iostream> #include<cstring& ...
- MPlayer-2016 最新版本
MPlayer 和 FFmpeg 最新版本 运行 Install.cmd 添加右键播放功能 mplayer\outformat.conf 配置视频分割命令参数 ; 往前0.05秒 大概10多个帧 ' ...
- HDU 3957 Street Fighter（搜索、DLX、重复覆盖+精确覆盖）
很久以前就看到的一个经典题,一直没做,今天拿来练手.街霸 给n<=25个角色,每个角色有 1 or 2 个版本(可以理解为普通版以及爆发版),每个角色版本可以KO掉若干人. 问最少选多少个角色( ...
- nyoj17_又做最大递增子序列
单调递增最长子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 求一个字符串的最长递增子序列的长度 如:dabdbf最长递增子序列就是abdf,长度为4 输入 ...
- js正则表达式替换空格
str.replace(/^\s+|\s+$/g, '') 解析: str:要替换的字符串 \s : 表示 space ,空格+: 一个或多个^: 开始,^\s,以空格开始$: 结束,\s$,以空 ...
- C# 总复习
1.循环语句 四要素:初始条件.循环条件.循环体.状态改变 循环的最后一句:循环条件不再满足 2. ++ --int a = 5; //在赋值语句中,后++需要,先进性赋值,然后进行+1运算 ...
- 【python】dict4ini和xmltodict模块用途
dict4ini模块:可以读写配置文件 xmltodict模块:将xml和json互相转换 https://pypi.python.org/pypi/xmltodict
- ios 横竖屏通知
屏幕切换时,会发送一个通知.只要注册一个通知: [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(do ...
- 三、jQuery--Ajax基础--Ajax全接触--JSON
JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...