jQuery实现tab选项卡效果小demo
html页面:
<section>
<h2>Section Title</h2>
<ul class="tab-nav">
<li><a href="#tab1" title="">Tab 1</a></li>
<li><a href="#tab2" title="">Tab 2</a></li>
</ul>
<div class="tab-contents">
<div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
<div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
</div>
</section>
js:
var tabs = {
init: function(){
var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
$tab_contents.find('.tab-content:not(:first)').hide();
$tab_nav.find('li:first').addClass('active');
$tab_nav.on('click', 'li a', function(e){
e.preventDefault();
var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
//this.hash 获取锚链接<a href="#tab1"></a>
$(parent,$tab_nav).find('li').removeClass('active');
$this.parent().addClass('active');
$contents.find('.tab-content').hide();
$contents.find(activeTab).fadeIn(250);
});
}
};
$(document).ready(tabs.init());
jQuery实现tab选项卡效果小demo的更多相关文章
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- js和jquery实现tab选项卡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery简单实现tab选项卡效果
html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- js 模仿jquery 写个简单的小demo
<div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...
- jquery版tab切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- AJ学IOS(26)UI之iOS抽屉效果小Demo
AJ分享,必须精品 先看效果 实现过程 第一步,把三个view设置好,还有颜色 #warning 第一步 - (void)addChildView { // left UIView *leftView ...
随机推荐
- 如何在微信中发送"相册"文件时有选择性地显示视频文件
相信很多微信用户在使用微信给朋友,同事发送相册中的文件时,微信会显示你手机中的视频文件,这样很不方便. 如果要完全不显示视频文件: 随便在手机中建立一个文件夹,名字叫 ".nomedia&q ...
- 图上两点之间的第k最短路径的长度 ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven
131072K One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with her. Howe ...
- 细嚼慢咽 Mongoose 5
此文已由作者黄锴授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 由于Mongoose一直没有中文文档,加上现在市面上充斥着太多"快速上手",很多中文 ...
- python学习-- 数据库迁移 python manage.py makemigrations 和 python manage.py migrate
python manage.py makemigrations 和 python manage.py migrate
- queue 类
一:普通队列 1.队列特征:先进先出,它只允许在一端(队尾)进行插入元素操作,在另一端(队头)进行删除元素操作 2. 存取类函数 front():用来取出queue中的队头元素,对应于front()函 ...
- 【bzoj1163/bzoj1339】[Baltic2008]Mafia 网络流最小割
题目描述 匪徒准备从一个车站转移毒品到另一个车站,警方准备进行布控. 对于每个车站进行布控都需要一定的代价,现在警方希望使用最小的代价控制一些车站,使得去掉这些车站后,匪徒无法从原定的初始点到达目标点 ...
- HDU——1163Eddy's digital Roots(九余数定理+同余定理)
Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- LibreOJ2044 - 「CQOI2016」手机号码
Portal Description 给出两个十一位数\(L,R\),求\([L,R]\)内所有满足以下两个条件的数的个数. 出现至少\(3\)个相邻的相同数字: 不能同时出现\(4\)和\(8\). ...
- 关闭chrome浏览器的input香蕉黄背景
chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复: /* Change the white to any color ;) 就是给input设置内 ...
- bzoj1076【SCOI2008】奖励关
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1076 有n种物品等概率落下,求期望最优收益 sol: 一眼看上去就是状压dp吧QAQ数据范围 ...