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>
相关推荐
鸿蒙布道师10 分钟前
OpenAI战略转向:开源推理模型背后的行业博弈与技术趋势
人工智能·深度学习·神经网络·opencv·自然语言处理·openai·deepseek
小白的高手之路36 分钟前
torch.nn.Conv2d介绍——Pytorch中的二维卷积层
人工智能·pytorch·python·深度学习·神经网络·机器学习·cnn
船长@Quant39 分钟前
PyTorch量化进阶教程:第五章 Transformer 在量化交易中的应用
pytorch·python·深度学习·transformer·量化交易·sklearn·ta-lab
拉不动的猪1 小时前
vue与react的简单问答
前端·javascript·面试
污斑兔1 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年1 小时前
css之定位学习
前端·css·学习
liruiqiang052 小时前
循环神经网络 - 通用近似定理 & 图灵完备
人工智能·rnn·深度学习·神经网络·机器学习
hunteritself2 小时前
DeepSeek重磅升级,豆包深度思考,ChatGPT原生生图,谷歌Gemini 2.5 Pro!| AI Weekly 3.24-3.30
人工智能·深度学习·chatgpt·开源·语音识别·deepseek
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js