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的更多相关文章

  1. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  2. 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  3. 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 ...

  4. js和jquery实现tab选项卡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  6. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. js 模仿jquery 写个简单的小demo

    <div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...

  8. jquery版tab切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. AJ学IOS(26)UI之iOS抽屉效果小Demo

    AJ分享,必须精品 先看效果 实现过程 第一步,把三个view设置好,还有颜色 #warning 第一步 - (void)addChildView { // left UIView *leftView ...

随机推荐

  1. 如何在微信中发送"相册"文件时有选择性地显示视频文件

    相信很多微信用户在使用微信给朋友,同事发送相册中的文件时,微信会显示你手机中的视频文件,这样很不方便. 如果要完全不显示视频文件: 随便在手机中建立一个文件夹,名字叫 ".nomedia&q ...

  2. 图上两点之间的第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 ...

  3. 细嚼慢咽 Mongoose 5

    此文已由作者黄锴授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 由于Mongoose一直没有中文文档,加上现在市面上充斥着太多"快速上手",很多中文 ...

  4. python学习-- 数据库迁移 python manage.py makemigrations 和 python manage.py migrate

    python manage.py makemigrations 和 python manage.py migrate

  5. queue 类

    一:普通队列 1.队列特征:先进先出,它只允许在一端(队尾)进行插入元素操作,在另一端(队头)进行删除元素操作 2. 存取类函数 front():用来取出queue中的队头元素,对应于front()函 ...

  6. 【bzoj1163/bzoj1339】[Baltic2008]Mafia 网络流最小割

    题目描述 匪徒准备从一个车站转移毒品到另一个车站,警方准备进行布控. 对于每个车站进行布控都需要一定的代价,现在警方希望使用最小的代价控制一些车站,使得去掉这些车站后,匪徒无法从原定的初始点到达目标点 ...

  7. HDU——1163Eddy's digital Roots(九余数定理+同余定理)

    Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  8. LibreOJ2044 - 「CQOI2016」手机号码

    Portal Description 给出两个十一位数\(L,R\),求\([L,R]\)内所有满足以下两个条件的数的个数. 出现至少\(3\)个相邻的相同数字: 不能同时出现\(4\)和\(8\). ...

  9. 关闭chrome浏览器的input香蕉黄背景

    chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复: /* Change the white to any color ;) 就是给input设置内 ...

  10. bzoj1076【SCOI2008】奖励关

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1076 有n种物品等概率落下,求期望最优收益 sol:  一眼看上去就是状压dp吧QAQ数据范围 ...