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>
相关推荐
我怎么能这么帅气几秒前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
迷路的小绅士12 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
BB_CC_DD16 分钟前
四. 以Annoy算法建树的方式聚类清洗图像数据集,一次建树,无限次聚类搜索,提升聚类搜索效率。(附完整代码)
深度学习·算法·聚类
前端snow20 分钟前
前端全栈第一课:用typeorm向数据库添加数据
前端
小希爸爸21 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师37 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭38 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码1 小时前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger1 小时前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话1 小时前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式