技巧一、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. m_Orchestrate learning system---二十、如何写代码不容易犯错

    m_Orchestrate learning system---二十.如何写代码不容易犯错 一.总结 一句话总结:能排序多排序 这次查错的启示: 1.代码数据更规整:要是取出的数据排序的话可以减少很多 ...

  2. xBIM 基础06 将STEP物理文件转换为XML

    系列目录    [已更新最新开发文章,点击查看详细]  一.STEP标准简介 STEP,它是Standard for the Exchange of Product model data的缩写.产品数 ...

  3. HTTP学习记录

    title: HTTP学习记录 toc: true date: 2018-09-21 20:40:48 HTTP协议,HyperText Transfer Protocol,超文本传输协议,是因特网上 ...

  4. 在Eclipse里连接Tomcat部署到项目(maven项目和web项目都适用)

    不多说,直接上干货! 前提, Tomcat *的下载(绿色版和安装版都适用) Tomcat *的安装和运行(绿色版和安装版都适用) Tomcat的配置文件详解 我这里以,manven项目为例,当然,w ...

  5. HTTP报文头解析

    HTTP报文头解析 本篇博客我们就来详细的聊一下HTTP协议的常用头部字段,当然我们将其分为请求头和响应头进行阐述.下方是报文头每个字段的格式,首先是头部字段的名称,如Accept,冒号后方紧跟的是该 ...

  6. (转)js document.all的用法

    document.all用法 一. document.all是页面内所有元素的一个集合.例如:      document.all(0)表示页面内第一个元素 二.document.all可以判断浏览器 ...

  7. 优化长的switch语句

    突然想到之前碰到的一个优化的面试题,现在想想switch用的太傻 public enum FormatType { GetKey, GetValue } public class Format { p ...

  8. PostgreSQL+PostGIS

    PostGIS简介 PostGIS是对象关系型数据库系统PostgreSQL的一个扩展,PostGIS提供如下空间信息服务功能:空间对象.空间索引.空间操作函数和空间操作符.同时,PostGIS遵循O ...

  9. HDU 5234 Happy birthday【DP】

    题意:给出n*m的格子,每个格子的值为w[i][j],在值不超过k的时候,可以往右或者往下走,问从(1,1)走到(n,m)能够得到的最大的值 类似于背包 d[i][j][k]=maxx(d[i-1][ ...

  10. vue如何给它的data值赋值

    activeDisplay的值如何改变 用$set();方法 vm.$set('b', 2) 或者 Vue.set(data, 'c', 3) this.someObject = Object.ass ...