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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
jQuery实现导航回弹效果
Feb 27 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
安全检查管理制度
2014/02/02 职场文书
就业自我评价
2014/02/04 职场文书
网络编辑岗位职责
2014/03/18 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
捐书活动倡议书
2015/04/27 职场文书
社会实践心得体会范文
2016/01/14 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python实现仓库管理系统
2022/05/30 Python