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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
javascript去除空格方法小结
May 21 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
js实现日历的简单算法
Jan 24 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
JS动画效果代码3
2008/04/03 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
BootStrap数据表格实例代码
2017/09/13 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Jquery异步上传文件代码实例
2019/11/13 jQuery
js实现无缝轮播图效果
2020/03/09 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python破解zip加密文件的方法
2018/05/31 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
附答案的Java面试题
2012/11/19 面试题
《白鹅》教学反思
2014/04/13 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
详解Nginx 工作原理
2021/03/31 Servers
如何用Navicat操作MySQL
2021/05/12 MySQL
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL