jquery简单实现tab选项卡效果
html:
- <ul class="tab">
- <li>最新</li>
- <li class="cur">热门</li>
- <li>新闻</li>
- </ul>
- <div>11</div>
- <div class="on">22</div>
- <div>33</div>
css:
- div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}
- .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}
- .tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:pointer; }
- .on{display:block;}
- .tab li.cur{background:blue;}
js:
- $(document).ready(function(){
- $(".tab li").click(function(){
- $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
- $("div").hide().eq($(this).index()).show();
- //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');
- });
- });
来源:http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
jquery简单实现tab选项卡效果的更多相关文章
- Jquery 简单的Tab选项卡特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- jQuery实现tab选项卡效果小demo
html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
- jquery简单的轮播效果!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Jquery——简单的视差滚动效果,兼容PC移动端
$(function(){ $(window).scroll(function(){ var top=$(this).scrollTop(); $(". ...
随机推荐
- WPF 基础 - 图片与 base64
1. base64 转图片 将 base64 转成 byte[] 将 byte[] 作为内存流保存到一个 BitmapImage 实例的流的源 把 BitmapImage 作为目标图片的 Source ...
- python学习之基础内容
python基础内容① 什么是python? -一种计算机语言,计算机语言分为 -高级语言:python.java.Ruby.C#.C++...... -基础语言:C语言.汇编 -计算机可以直接执行基 ...
- 网易云信 QUIC 加速服务架构与实践
导语:网易云信作为音视频服务提供商的领导者,一直致力于提供顶级的音视频通话服务体验,为用户在各种恶劣环境下提供可靠的音视频服务.如何在极端弱网条件下仍然能给用户提供可靠的音视频服务,是网易云信关注的重 ...
- Stone Game, Why are you always there? HDU - 2999
题目链接:https://vjudge.net/problem/HDU-2999 题意:有N堆石头,两个人交替取,每次只能取连续的k个石子,最后没有石子取得人输. 思路:如果我们每次取靠边的k个,那么 ...
- J. Cole 的 InnoDB 系列 - 1. 学习 InnoDB - 深入探索核心原理之旅
原文地址:https://blog.jcole.us/2013/01/02/on-learning-innodb-a-journey-to-the-core/,本系列翻译会在其基础上扩展一些 MySQ ...
- IdentityServer4是什么
1 什么是IdentityServer4? IdentityServer4是用于ASP.NET Core的OpenID Connect和OAuth 2.0框架. 2 什么是OAuth 2.0? OAu ...
- [模拟]P1047 校门外的树
校门外的树 题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,- ...
- Typescript进阶之路
TypeScript 何为TypeScript 一.编程语言类型 动态类型语言(Dynamically Typed Language) 类型的检查是在运行时才做 例子---JavaScript.Rub ...
- 6.1vector用法
目录 一.用法介绍 二.基本用法 三.PAT A1039 一.用法介绍 vector<typename>name; 按照这样的格式进行定义与书写. 注意定义成双数组的情况要加上空格. ve ...
- MySQL数据库高级五:主从复制
主机只能一台 从机去复制 单表500万上限