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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
浅谈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
Php图像处理类代码分享
2012/01/19 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
React Router基础使用
2017/01/17 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python如何快速实现分布式任务
2017/07/06 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
pandas分批读取大数据集教程
2020/06/06 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
某科技软件测试面试题
2013/05/19 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
成人继续教育实施方案
2014/03/01 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
团组织推荐意见
2015/06/05 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS