《前端》小米官网的js控制商品页签切换显示。

今天上午跟着B站的Web前端开发之小米商城实战项目【蝉壳学院】https://www.bilibili.com/video/av30579763?t=430&p=8的p8节课学习了点击标签对应页的商品显示案例。

现做总结如下：

html：

        <!-- 主界面 -->
            <!-- 这里会列出很多商品，这些商品会堆砌在同一页，实质需要的是：对应商品放到对应的页签内。 使用css的显示和隐藏来实现 -->

        <div id="lists" class="seckill-goods">
            <!-- 第1个商品 -->
            <ul class="clearfix">
                <li>
                    <div class="bg">
                        <img src="img/led.jpg" alt="">
                    </div>
                    <div class="info">
                        <a href="" class="name" style="color: black;"> MIJOY 抽纸青春版 24包/箱 </a>
                        <p class="tips">精选原生竹浆，健康环保</p>
                        <p class="price" style="color:red">&nbsp;1元 &nbsp;<del>129元</del></p>
                        <a href="" class="btn"style="">登录后抢购</a>
                        <a href="">提醒我</a>
                        <p>已有1111个人设置提醒</p>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 第2个商品 -->
            <ul class="clearfix active">
                <li>
                    <div class=