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 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
js 处理URL实用技巧
Nov 23 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
动态加载js、css的实例代码
May 26 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
vuex的简单使用教程
Feb 02 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 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
杏林同学录(一)
2006/10/09 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python让列表倒序输出的实例
2018/06/25 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
scrapy-splash简单使用详解
2021/02/21 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
个人总结格式范文
2015/03/09 职场文书
感恩的心主题班会
2015/08/12 职场文书
python实现过滤敏感词
2021/05/08 Python