【HTML\JS】使用HTML、JS实现“分类详情”页面（详情页随分类的滚动而变化）

       许多购物软件都存在的“分类详情”，使使用者方便快捷地获取有用的信息。具体代码及效果如下。

 京东、苏宁易购动态效果图

 具体代码如下：

样式部分

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div {
        width: 900px;
        height: 500px;
        border: solid 3px black;
        margin: 100px auto;
    }

    .l {
        float: left;
        width: 200px;
        height: 500px;
        background-color: #eee;
    }

    .l li {
        height: 100px;
        width: 200px;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
    }

    .r {
        float: right;
        width: 700px;
        height: 500px;
        background-color: rgb(71, 223, 10);
    }

    .r li {
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 500px;
        font-size: 100px;
        background-color: #eee;
        display: none;
    }
    .active{
        background-color:#999;
        color: #fff;
        
    }
    .activedom{
        display: block !important;
    }

​

主体部分

    <div>
        <ul class="l">
            <li>手机</li>
            <li>男装</li>
            <li>家居</li>
            <li>食品</li>
            <li>母婴</li>
        </ul>
        <ul class="r">
            <li>手机-详情</li>
            <li>女装-详情</li>
            <li>家居-详情</li>
            <li>食品-详情</li>
            <li>母婴-详情</li>
        </ul>
    </div>

 JS部分

​

        var lAll = document.querySelectorAll('.l li')
        var rAll = document.querySelectorAll('.r li')

        for (var i = 0; i < lAll.length; i++) {

            lAll[i].index = i;

            lAll[i].onmouseenter = function () {
                
                console.log(this.index);
                clearClassName(lAll);
                clearClassName(rAll);

                this.className = "active"

                rAll[this.index].className = "activedom"

            }

        }
        function clearClassName(doms){
            for (var i = 0; i < doms.length; i++) {
            doms[i].className = "";
            }
        }

// 获取两个列表中所有各自的li

        var lAll = document.querySelectorAll('.l li') 

        var rAll = document.querySelectorAll('.r li')

// for循环覆盖第一个列表中的所有li

        for (var i = 0; i < lAll.length; i++) {

 // 将i（下标）赋给第一个列表中的每一个li

            lAll[i].index = i;

// 添加鼠标移入事件

            lAll[i].onmouseenter = function () {

// 清除第一个和第二个列表中所有li的类名(class),使鼠标一旦移入某个分类,为该分类添加"active"样式,鼠标移出该分类,其class为空

                clearClassName(lAll);

                clearClassName(rAll);

                // 给予鼠标移动到的li一个类名,方便添加样式

                this.className = "active"

                // 给 与鼠标移入的 第一个列表中li的//下标相同//的 第二个列表中的li添加"activedom"样式

                rAll[this.index].className = "activedom"

}

        }

        // 用以清除li类名的"工具function"

        function clearClassName(doms){

            for (var i = 0; i < doms.length; i++) {

            doms[i].className = "";

            }

        }

代码实现效果