京东秒杀 - 频道广场 - 为你推荐 - 反馈 - 返回顶部 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东秒杀 - 频道广场 - 为你推荐 - 反馈 - 返回顶部</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onebox{
        height: 400px;
        width: 100%;
        background-color: aqua;
    }
    .twobox{
        height: 800px;
        width: 100%;
        background-color:gold;
    }
    .threebox{
        height: 1200px;
        width: 100%;
        background-color: palevioletred;
    }
    .fourbox{
        height: 1400px;
        width: 100%;
        background-color: peru;
    }
    .fivebox{
        height: 400px;
        width: 100%;
        background-color: aqua;
    }
    ul{
        text-align: center;
        width: 85px;
        background-color: aliceblue;
    }
    li{
        position: relative;
        text-align: center;
        list-style: none;
        height: 85px;
line-height: 25px;
    }
<pre><code>li a{
    color: #333333;
    font-size: 16px;
    text-decoration: none;
    position: absolute;
    top: 13px;
    left: 16px;
display: block;
width: 45px;
border-bottom: 1px solid gray;
   
}
li:hover{
    background-color: red;
}
li:hover a{
    color: aliceblue;
    border: 0;
}
.active{
    color: #e1251b;
}
</code></pre>
</style>
<body>
    <div class="bigbox">
        <div class="onebox"><p>京东秒杀</p></div>
        <div class="twobox"><p>频道广场</p>
            <ul>
                <li><a href="" data-name="one" class="active">京东秒杀</a></li>
                <li><a href=""data-name="two">频道广场</a></li>
                <li><a href=""data-name="three">为你推荐</a></li>
                <li><a href=""data-name="four">反馈信息</a></li>
                <li><a href=""data-name="five">返回顶部</a></li>
            </ul>
        </div>
        <div class="threebox"><p>为你推荐</p></div>
        <div class="fourbox"><p>反馈</p></div>
        <div class="fivebox"><p>顶部</p></div>
<pre><code>&lt;/div&gt;
</code></pre>
</body>
<script>
    let lis = document.querySelectorAll('li');
    lis.forEach(function(li){
        li.addEventListener('click', function(e){
            let old = document.querySelector('.active');
            if(old){
                old.classList.remove('active');
            }
            e.target.classList.add('active');
        });
    });
<pre><code>&lt;/script&gt;
</code></pre>
</html>