jQuery实现获取元素索引值index的方法


Posted in Javascript onSeptember 18, 2016

本文实例讲述了jQuery实现获取元素索引值index的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery获取索引值</title>
<style type="text/css">
  *{margin:0; padding:0;}
  ul,li{list-style:none;}
  #wrap{width:980px; height:500px; overflow:hidden; margin:0 auto;}
  ul{width:200px; height:500px; float:left;}
  ul li{width:200px; height:100px; line-height:100px; text-align:center; font-size:16px; cursor:pointer;}
  #wrap div{width:700px; height:500px; float:right;}
  #btn0,.box0{background:#933;}
  #btn1,.box1{background:#09F;}
  #btn2,.box2{background:#93F;}
  #btn3,.box3{background:#F66;}
  #btn4,.box4{background:#3C0;}
  .box2,.box3,.box1,.box4{display:none;}
  #btn0.current,#btn1.current,#btn2.current,#btn3.current,#btn4.current{border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#btn li").click(function(){
      $(this).addClass("current").siblings().removeClass("current");
      var n=$("#btn li").index(this);
      $(".box"+n).show().siblings("div").hide();
    })
  })
</script>
</head>
<body>
  <div id="wrap">
    <h2>点击相应的按钮出现相对应颜色的盒子</h2>
    <ul id="btn">
      <li id="btn0" class="current">0</li>
      <li id="btn1">1</li>
      <li id="btn2">2</li>
      <li id="btn3">3</li>
      <li id="btn4">4</li>
    </ul>
    <div class="box0">第一个盒子</div>
    <div class="box1">第二个盒子</div>
    <div class="box2">第三个盒子</div>
    <div class="box3">第四个盒子</div>
    <div class="box4">第五个盒子</div>
  </div>
</body>
</html>

运行效果图如下:

jQuery实现获取元素索引值index的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
浅谈js中的引用和复制(传值和传址)
Sep 18 #Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 #Javascript
JavaScript每天必学之事件
Sep 18 #Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 #Javascript
js完整倒计时代码分享
Sep 18 #Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 #Javascript
js手动播放图片实现图片轮播效果
Sep 17 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JS画线(实例代码)
2013/11/20 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
前厅收银主管岗位职责
2014/02/04 职场文书
关于读书的演讲稿
2014/05/07 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
音乐之声观后感
2015/06/04 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript