如题 想要鼠标移入第i个li的时候 对应的第几个div显示出来
不太明白你的意思,或许是跟楼上一个道理 取到li的对应索引,然后用到div的对应索引里
或许你把div都写成li的子元素了 那么只要用jquery里面的hover就好了
对li与div做一下对应,比如索引对应,第i个li对应第i个div。
var liIndex=$('li').index();
$('div').eq(liIndex).show();
当然,也可以是属性上的对应。
$("li").mouseover(function() {
$("div").eq($(this).index()).show().siblings().hide();
});
思路:
1.获取当前mouseover的li的索引值
2.让索引值一样的div显示其他的(siblings)隐藏
<div id="wrapper">
<!-- 这里是li-->
<ul id="nav-li">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 这里是对应的div-->
<div id="content-wrpper">
<div>1内容</div>
<div>2内容</div>
<div>3内容</div>
</div>
</div>
js代码
window.onload = function(){
var navLi = document.getElementById("nav-li");
var navLiList = navLi.getElementsByTagName("li");
var contentDiv = document.getElementById("content-wrpper");
var contentDivList = contentDiv.getElementsByTagName("div");
var index;
for(var i=0; i<navLiList.length; i++){
navLiList[i].index = i;
}
//采用事件代理
navLi.addEventListener("mouseover",function(e){
if(e.target.nodeName.toLowerCase() === "li"){
//添加index索引
for(var j=0; j< contentDivList.length; j++){
contentDivList[j].style.display = "none";
}
contentDivList[e.target.index].style.display = "block";
}
},false);
}
js写的不太好,还有其他可以优化的。今天就先到这里