<!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中已经很明确的写出了如何通过鼠标获取索引 不懂的话可以留言