jquery 中的index（）鼠标取到索引的介绍

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
    $(function(){

    $("#nav li span").hover(function(){
    var index = $("#nav li span ").index(this);
    $("#nav li:eq("+index+") span~p").show();
    },
    function(){
    var index = $("#nav li span ").index(this);
    $("#nav li:eq("+index+") span~p").hide();
    }
    );

    });
    </script>
</head>
<body>
<nav id="nav">
    <li><span></span><p >就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
</html>


//css
*{padding:0;margin:0;}
a{text-decoration:none;}
.nav-box{
    width:210px;
    margin:5px 0 0 5px;
}
.nav-top a{
    display:block;
    height:45px;
    font-size:16px;
    line-height:45px;
    padding:0 10px;
    background:#B1191A;
    color:#fff;
}
ul{background:#c81623;list-style:none;padding-bottom:1px;}
ul li{
    height:30px;
    line-height:30px;
    font-size:14px;
    color:#fff;
    position:relative;
    padding-left: 5px;
}
.orange{background-color: orange;}
ul li a{color:#fff;}
ul li div{display:none; position: absolute; left: 211px; top:0px;}

<script>
$(function(){
$("ul li ").hover(function(){
var index =$("ul li").index(this);
$(" ul li:eq("+index+") div").show();
$("ul li:eq("+index+")").toggleClass("orange");

},
function(){
var index =$("ul li").index(this);
$(" ul li:eq("+index+") div").hide();
$("ul li:eq("+index+")").toggleClass("orange");
}
);
});
</script>

上面的jquery中已经很明确的写出了如何通过鼠标获取索引不懂的话可以留言

jquery 中的index（）鼠标取到索引的介绍

猜你喜欢