一般的电商网站商品详情页的底部都会有一个如下图所示的导航栏，基本思路是，头部导航栏用li标签列出商品介绍，规格与包装等导航标题；内容用div元素分别列出，使用CSS显示默认选项，其他的不让显示，然后用js实现，鼠标点击哪个导航标题，内容区域就显示对应的内容

image.png

1.首先
页面结构

<div class="box">
        <div class="nav">
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（5000）</li>
            <li>手机社区</li>
        </div>
        <div class="context">
            <li style="display:block">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（5000）</li>
            <li>手机社区</li>
        </div>
    </div>

2.CSS效果

        li{
            list-style: none;
        }
        .box{
            width: 600px;
            margin: 50px auto;
        }
        .box .nav{
            height: 30px;
            line-height: 30px;
            background-color: #cccccc;
        }
        .box .nav li{
            display: inline-block;
            padding:0 15px;
        }
        .box .nav .current{
            color: white;
            background-color: crimson;
        }
        .box .context li{
            display: none;
        }

3.js效果实现

<script>
        //选择导航标签
        var toplis = document.querySelector('.nav').querySelectorAll('li');
        //选择文本标签
        var ctx = document.querySelector('.context').querySelectorAll('li');
        for(var i = 0; i < toplis.length;i++){
            toplis[i].setAttribute('index',i);
            toplis[i].onclick=function(){
                for(var j = 0; j < toplis.length; j++){
                    console.log(toplis[j]);
                    toplis[j].className='none';
                }
                this.className='current';
                var index = this.getAttribute('index');
                console.log(index);
                for(var i = 0; i < ctx.length; i++){
                    console.log(ctx[i]);
                    ctx[i].style.display='none';
                }
                ctx[index].style.display='inline-block';
            }
        }
    </script>