商品导航栏切换

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

image.png

1.首先
页面结构

        

            
商品介绍
            
规格与包装
            
售后保障
            
商品评价（5000）
            
手机社区
        
        

            
商品介绍
            
规格与包装
            
售后保障
            
商品评价（5000）
            
手机社区
        
    

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效果实现