技巧一、jQuery :eq() 选择器

定义和用法

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素。

技巧二、jQuery DOM 元素方法 - index() 方法

定义和用法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释:如果未找到元素,index() 将返回 -1。

CSS部分

 <style>
*{
margin:;
padding:;
list-style:none;
}
#main {
width:600px;
margin:200px auto;
}
#tab {
overflow:hidden;
background:#000;
border:1px solid #000;
}
#tab li{
float:left;
color:#fff;
height:30px;
cursor:pointer;
line-height:30px;
padding:0 20px;
}
#tab li.showed {
color:#000;
background:#ddd;
}
#contents {
border:1px solid #000;
border-top-width:;
}
#contents ul {
line-height:150px;
display:none;
margin:0 30px;
padding:10px 0;
}
</style>

HTML部分

 <div id="main">
<ul id="tab">
<li class="showed">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="contents">
<ul style="display:block;">
<span>模块一</span>
</ul>
<ul>
<span>模块二、模块二</span>
</ul>
<ul>
<span>模块三、模块三、模块三</span>
</ul>
</div>
</div>

jQuery部分

 <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(function(){
window.onload = function()
{
var lis = $('#tab li');
7 var uls = $('#contents ul'); lis.click(function(){
var li_selected = $(this);//选中的li分类
var num = li_selected.index();//相对于同胞元素的位置
lis.removeClass();//清空liCSS属性
li_selected.addClass('showed');//选中li添加属性
uls.css('display','none');//隐藏所有ul标签
uls.eq(num).css('display','block'); //展示选中的li所对应的ul内容
})
}
});
</script>

效果图如下:

jQuery实现tab标签切换效果的更多相关文章

  1. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  2. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  3. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  4. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  5. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  6. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  7. Axure RP Pro 7.0苏宁易购式标签切换效果教程

    转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...

  8. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  9. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. VC++基于CXImage库实现缩略图

    一般的图像处理软件都对读入程序的图像文件建一个缩略图的列表,像ACDSee那样.笔者最近在做一个图像处理的项目,处理的原始数据就是图像文件.从项目一开始就想做一个缩略图,但一直苦于技术水平有限,且时间 ...

  2. [JZOJ 5437] [NOIP2017提高A组集训10.31] Sequence 解题报告 (KMP)

    题目链接: http://172.16.0.132/senior/#main/show/5437 题目: 题解: 发现满足上述性质并且仅当A序列的子序列的差分序列与B序列的差分序列相同 于是我们把A变 ...

  3. sql server2008怎么给一张表加一个用户

    有时候我们要对数据库进行权限管理,防止有人误操作或者窃取数据,那么小编这篇文章就是实现这个的操作过程. 百度经验:jingyan.baidu.com 工具/原料   sql server2008数据库 ...

  4. 【原创】apache虚拟主机配置

    1.取消httpd.conf中以下行的注释 Include conf/extra/httpd-vhosts.conf 2.增加虚拟主机的目录,代表该目录作为一个网站的虚拟目录,配置权限,允许访问: & ...

  5. hiho1041 - 树,遍历

    题目链接 给一棵树,给一个序列,问能不能按这个序列遍历这棵树,满足每条边最多经过两次. -------------------------------------------------------- ...

  6. 优动漫PAINT-草地教程

    非常实用的草地教程,是场景控们绝对要学会的绘画技巧~更有配套草地笔刷~让场景绘画更简易~ 教程是简单,呃.... 没有优动漫PAINT软件肿么办? 别着急,╭(╯^╰)╮ 小编给你送来了 齐全的哟? ...

  7. Python3基础笔记---线程与进程

    参考博客:Py西游攻关之多线程(threading模块) 一.并发与并行的区别 并发:交替做不同事的能力并行:同时做不同事的能力 行话解释:并发:不同代码块交替执行的性能并行:不同代码块同时执行的性能 ...

  8. Java线程之Java内存模型(jmm)

    一.Java内存模型(jmm) 线程通信 消息传递 重排序 顺序一致性 Happens-Before As-If-Serial

  9. 15条JavaScript最佳实践【转】

    本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...

  10. php5权限控制修饰符

    1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...