左右结构tab栏分类切换

作者：hu_time

描述：左右分类形式的tab栏切换

之前写过两个上下结构的分类切换tab栏，来补充一个左右结构的切换效果。

注：需要提前引入一下jq文件。代码可直接复用，手机端样式。pc端可能需要对样式进行细微的修改即可。

代码：

html:

    <!-- 商品分类 -->
    <div class="classify-box">
        <div class="classify-l">
            <div class="classify-list active">
                <img src="../images/商家详情/4.png" alt="">
                <span> 超值套餐</span>
            </div>
            <div class="classify-list">
                <span>超值套餐</span>
            </div>
            <div class="classify-list">
                <span>超值套餐</span>
            </div>
            <div class="classify-list">
                <span>超值套餐</span>
            </div>
        </div>
        <div class="classify-r">
            <div class="show" style="display: block;">
                <div class="content">
                    <div class="content-l">
                        <img src="" alt="">
                    </div>
                    <div class="content-r">
                        <span class="name">商品名称</span>
                        <span class="sales">月售1562份</span>
                        <span class="prize"> <img src="" alt=""> ￥25</span>
                        <span class="m-prize">门市价￥69</span>
                    </div>
                </div>
            </div>
            <div class="show">123</div>
            <div class="show">456</div>
            <div class="show">789</div>
        </div>
    </div>

css:

        //总容器的样式
        .classify-box {
            width: 100%;
            /* padding-top: 1rem; */
            height: 100vh;
            background-color: #f4f4f4;
            display: flex;
        }
		//左结构样式
        .classify-box .classify-l {
            width: 23%;
            height: 100%;
            background-color: #fff;
        }
		//单个选项样式
        .classify-box .classify-l .classify-list {
            width: 100%;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 0.6rem;
        }
		//选项添加小图片样式
        .classify-box .classify-l .classify-list img {
            width: 1rem;
            height: 1rem;
            border: 1px solid black;
        }
		//选项点击样式
        .active {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            width: 100%;
            height: 2.5rem;
            text-align: center;
            line-height: 2.5rem;
            background-color: #f4f4f4;
            border-left: 0.2rem solid #ff6201;
            box-sizing: border-box;
        }
		//右结构样式
        .classify-box .classify-r {
            width: 77%;
            overflow-y: scroll;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            height: 100%;
        }
		//切换容器样式
        .classify-box .classify-r .show {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            display: none;
        }
		//内容
        .classify-box .classify-r .show .content {
            width: 92%;
            height: 6rem;
            background-color: #fff;
            border-right: 0.5rem;
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            margin-left: 4%;
        }

        .classify-box .classify-r .show .content .content-l {
            width: 37%;
            height: 100%;
        }

        .classify-box .classify-r .show .content .content-l img {
            width: 100%;
            height: 100%;
        }

        .classify-box .classify-r .show .content .content-r {
            width: 60%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0.5rem 0;
            box-sizing: border-box;
        }

        .classify-box .classify-r .show .content .content-r span {
            width: 100%;
            box-sizing: border-box;
        }

        .classify-box .classify-r .show .content .content-r .name {
            font-size: 1rem;
            color: #333333;
            font-weight: 700;
        }

        .classify-box .classify-r .show .content .content-r .sales {
            color: #666666;
            font-size: 0.7rem;
        }

        .classify-box .classify-r .show .content .content-r .prize {
            color: #ff0000;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
        }

        .classify-box .classify-r .show .content .content-r .prize img {
            width: 1.2rem;
            height: 1rem;
        }

        .classify-box .classify-r .show .content .content-r .m-prize {
            color: #999999;
            font-size: 0.4rem;
        }

js：

       //选项切换
       $(function () {
            $('.classify-list').on('click', function () {
                $('.classify-list').removeClass('active');
                $(this).addClass('active');
            })
        })
        // tab切换
        var btns = document.getElementsByClassName('classify-list');
        var boxs = document.getElementsByClassName('show');
        for (var i = 0; i < btns.length; i++) {
            btns[i].index = i; //获取当前索引
            btns[i].onmouseover = function () {
                for (var k = 0; k < boxs.length; k++) {
                    boxs[k].style.display = 'none';
                }
                //显示对应当前索引的盒子
                boxs[this.index].style.display = 'block';
            }
        }