html 部分
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<dl>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
</dl>
css 部分
{margin: 0;
padding: 0;
list-style: none;
}
ul, dl {
width: 1080px;
margin: 0 auto;
overflow: hidden;
}
li:nth-child(1) {
background: #333;
}
li {
width: 25%;
text-align: center;
line-height: 50px;
height: 50px;
box-sizing: border-box;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: #000;
color: #fff;
float: left;
}
dl {
position: relative;
}
dd:nth-child(1) {
display: block;
}
dd {
width: 100%;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 50px;
background: #f2f5f9;
display: none;
}
js 部分
windowonload = function () { // html 渲染完成后var li = documentgetElementsByTagName('li') // 获取li
var dd = documentgetElementsByTagName('dd') //获取dd
for (let i = 0; i < lilength; i++) { //给每一个li添加鼠标移入事件
li[i]addEventListener('mouseover', function () {
//鼠标移入
setDD(i)
setLi(i)
})
}
function setLi(num) {
for (var i = 0; i < lilength; i++) {
li[i]stylebackground = "#000"
}
li[num]stylebackground = "#333"
}
function setDD(num) {
for (var i = 0; i < ddlength; i++) {
dd[i]styledisplay = "none"
}
dd[num]styledisplay = "block"
}
}
有啥不懂问我就好
onload=function(){
var ul = documentgetElementsByTagName("ul")[0];
getLis(ul);
}
var getLis = function(ul){
var ulc = ulchildren;
for(var i = 0; i < ulclength; i++){
var lii = ulc[i];
if(liitagNametoLowerCase() == "li"){
consolelog(lii);
}
var cs = liichildren;
for(var j = 0; j < cslength; j++){
var csj = cs[j];
if(csjtagNametoLowerCase() == "ul"){
getLis(csj);
}
}
}
}
这个是onmouseover事件，就是说当鼠标在某个标签上时触发的事件，然后你在javascript里用documentgetElementById('id')就能获取你鼠标停留在的某个标签的对象（就是在鼠标移入的一瞬间）绝对满足你的要求
举个例子
<script>
function getObj(){
documentgetElementById('b')innerHTML='bbbbbbb';
}
function moveObj(){
documentgetElementById('b')innerHTML='';
}
</script>
<div id="b" onmouseover="getObj();" onmouseout="moveObj()"></div>
当你的鼠标移到这个div的一瞬间,这个div里就出现了bbbbbb
当你的鼠标离开这个div的一瞬间，这个div里的bbbbb就没了
php中的onmouseover是小写，其他中要不要这样写onMouseOver我就不知道了，你试一下就行了
<!DOCTYPE html>
<html>
<head>
<meta >
以上就是关于怎么实现鼠标移入第i个li则对应显示第i个div,默认显示第一个LI全部的内容，包括:怎么实现鼠标移入第i个li则对应显示第i个div,默认显示第一个LI、javascript里获取div或ul元素的第一层li或div节点数组再获取第二层li数组再及以下节点如下、当鼠标离开某个div的瞬间，怎样获取下一个div或其他标签的id或对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）