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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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导航下拉菜单的实现如此简单
2013/09/22 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php关联数组快速排序的方法
2015/04/17 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
化妆品促销方案
2014/02/24 职场文书
安全生产标语
2014/06/06 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
学籍证明模板
2014/11/21 职场文书
立项申请报告范本
2015/05/15 职场文书