Question

怎么实现鼠标移入第i个li则对应显示第i个div,默认显示第一个LI

怎么实现鼠标移入第i个li则对应显示第i个div,默认显示第一个LI的内容:
具体要求如下:
1,有四个li,li的块(DIV也行)宽度25%,水平排列刚好占完屏.默认显示第一个LI下面的DIV内容,LI显示样式有背景颜色,其他LI背景普通.
2.当鼠标移动到某个LI的块或DIV时,其背景变色,并在下面显示其对应的DIV,其他LI背景样式变普通.
3.对应的四个DIV是重叠的,
直接贴出代码就行了

Answer 1

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 部分

window.onload = function () {  // html 渲染完成后
    var li = document.getElementsByTagName('li')  // 获取li
    var dd = document.getElementsByTagName('dd')  //获取dd
    for (let i = 0; i < li.length; i++) {     //给每一个li添加鼠标移入事件
        li[i].addEventListener('mouseover', function () {
            //鼠标移入
            setDD(i)
            setLi(i)
        })
    }

    function setLi(num) {
        for (var i = 0; i < li.length; i++) {
            li[i].style.background = "#000"
        }
        li[num].style.background = "#333"
    }

    function setDD(num) {
        for (var i = 0; i < dd.length; i++) {
            dd[i].style.display = "none"
        }
        dd[num].style.display = "block"
    }
}

有啥不懂问我就好

追问

测试看起来很不错,不过有个语法有错误,你看一下是怎么回事,这行
for (let i = 0; i < li.length; i++) { //给每一个li添加鼠标移入事件

追答

let  用的是ES6的新语法   可能你编辑器不支持

我重新写了下es5的语法

window.onload = function () {  // html 渲染完成后
    var li = document.getElementsByTagName('li')  // 获取li
    var dd = document.getElementsByTagName('dd')  //获取dd
    for (var i = 0; i < li.length; i++) {     //给每一个li添加鼠标移入事件
        addHover(i)
    }

    function addHover(i) {
        li[i].addEventListener('mouseover', function () {
            //鼠标移入
            setDD(i)
            setLi(i)
        })
    }

    function setLi(num) {
        for (var i = 0; i < li.length; i++) {
            li[i].style.background = "#000"
        }
        li[num].style.background = "#333"
    }

    function setDD(num) {
        for (var i = 0; i < dd.length; i++) {
            dd[i].style.display = "none"
        }
        dd[num].style.display = "block"
    }
}

追问

这次可以了,真是太感谢了,连CSS都帮我美化了

Answer 2

好无聊的东西呀