jQuery选项卡小练习

xml 复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{
            margin:0;
            border:0;
            padding:0;
        }
        .box{
            width: 1000px;
            margin:50px auto;
        }


        .tab dd{
            float:left;
            width:100px;
            padding:3px;
            margin-right:1px;
            background: #FF0000;
            color:#fff;
            text-align: center;
            cursor: pointer;
        }
        .tab dd:hover,.tab dd.active{
            background: #990000;
        }
        .goods{
            clear:both;
        }
        .goods div{
            display: none;
        }
        .goods div.current{
            display: block;
        }
    </style>
    <script src="../jquery-1.8.2.js"></script>
    <script>
        $(function(){
            $('dd').on('click',function(){
                $(this).addClass('active').siblings().removeClass('active');
                //拿到dd中所对应的下标
                var i=$(this).index();
                //以下标的值来找div的位置
                $('.goods div').hide().eq(i).show(1000)
            })
        })
    </script>
</head>
<body>
<div class="box">
    <dl class="tab">
        <dd class="active">手机</dd>
        <dd>家电</dd>
        <dd>服装</dd>
        <dd>数码</dd>
        <dd>玩具</dd>
    </dl>
    <div class="goods">
        <div class="current"><h1>手机商品</h1></div>
        <div><h1>家电商品</h1></div>
        <div><h1>服装商品</h1></div>
        <div><h1>数码商品</h1></div>
        <div><h1>玩具商品</h1></div>
    </div>
</div>


</body>
</html>
相关推荐
张可爱3 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户877244753963 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
Aoda9 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
望获linux12 分钟前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统
zxg_神说要有光20 分钟前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊24 分钟前
今天,我的个人网站正式上线了!
前端
BB_CC_DD27 分钟前
在NVIDIA Jetson Orin NX (Ubuntu 22.04, JetPack 5.1, CUDA 11 cuDnn8) 上安装PyTorch 2
pytorch·深度学习·ubuntu
youngfengying37 分钟前
身体活动(physical activity)---深度学习
人工智能·深度学习
念念不忘 必有回响42 分钟前
前端自动化部署全流程(Jenkins + Nginx)
前端·自动化·jenkins
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏