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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
浅谈Express异步进化史
Sep 09 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
浅谈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 insert语法详解
2008/06/07 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
es6基础学习之解构赋值
2018/12/10 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
进一步了解Python中的XML 工具
2015/04/13 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Pytorch 实现权重初始化
2019/12/31 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
python和php学习哪个更有发展
2020/06/17 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
经典c++面试题四
2015/05/14 面试题
安全生产计划书
2014/05/04 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
客房服务员岗位职责
2015/02/09 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android