js实现网页左侧导航条,鼠标经过显示隐藏的面板

js实现网页左侧导航条,鼠标经过显示隐藏的面板

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #left_nav {
            position: relative;
            border: 1px solid #666;
            width: 150px;
            height: 100px;
        }

        #left_nav ul li {
            height: 25px;
            line-height: 25px;
            background-color: #333;
            color: #fff;
        }

        #left_nav ul li .pane {
            background-color: blue;
            display: none;
            position: absolute;
            top: 0;
            left: 150px;
            width: 100px;
            height: 100px;
        }

        #left_nav ul li:hover {
            background-color: orange;
        }
    </style>
<script>
        var li = document.querySelectorAll('li');

        for (var i = 0; i < li.length; i++) {
            li[i].onmouseover = function () {
                this.children[0].style.display = 'block';
            }
            li[i].onmouseout = function () {
                this.children[0].style.display = 'none';
            }
        }
    </script>

注:js中的鼠标经过事件与css中的伪类:hover的区别在于,css中的:hover只在鼠标经过时改变操作元素的样式,当鼠标移出时,样式又回到原来的样子,而js中要例外设置鼠标移出事件让元素样式变成原来的样子。

容易入的坑:
1、var li = document.querySelectorAll(‘li’);获取到li后不能直接给li加点击事件,因为这个li是一个包含很多li元素的数组,需要遍历一个一个的加。
2、在原生js中获取子元素很麻烦也容易出错,比如空格也是子元素,所以有时获取的不一定是自己想要的那个。(jquery很好的解决了这个问题)

你可能感兴趣的:(js实现网页左侧导航条,鼠标经过显示隐藏的面板)