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图像处理—为矩阵添加常用方法
Dec 27 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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
2006/12/14 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
javascript事件问题
2009/09/05 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python将txt文件读取为字典的示例
2018/12/22 Python
更新修改后的Python模块方法
2019/03/03 Python
python实现文件的备份流程详解
2019/06/18 Python
tensorflow 模型权重导出实例
2020/01/24 Python
通过实例解析Python return运行原理
2020/03/04 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
求职信的七个关键技巧
2014/02/05 职场文书
初三学生评语大全
2014/04/24 职场文书
销售经理岗位职责
2015/01/31 职场文书
美术教师个人工作总结
2015/02/06 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
放飞理想主题班会
2015/08/14 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
pt-archiver 主键自增
2022/04/26 MySQL