html css jquery选项卡 代码练习小项目

在学习 html 和 css jquery 结合使用的时候 做好是能尝试做一些简单的小功能,来提高自己的 逻辑能力,熟悉代码的编写语法

下面分享一段代码 使用html css jquery选项卡 代码练习

bash 复制代码
<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>

html 使用的是 div dl dd标签实现的

下面是css 代码

简单的写了一些 css 样式

bash 复制代码
      *{
            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;
        }

代码实现起来还是比较简单的 有兴趣的 兄弟们可以尝试练习以下

全部代码获取传送门:https://wwwoop.com/home/Index/projectInfo?goodsId=15&typeParam=2

相关推荐
m0_zj3 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
百度网站快速收录4 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
engchina4 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
大模型铲屎官6 小时前
HTML从入门到精通:链接与图像标签全解析
开发语言·前端·javascript·html·编程·链接标签·图像标签
大模型铲屎官6 小时前
HTML 列表标签全解析:无序与有序列表的深度应用
前端·javascript·html·有序列表·列表标签·无序列表
engchina6 小时前
CSS 溢出内容处理:从基础到实战
前端·css
engchina6 小时前
深入解析:一个简单的浮动布局 HTML 示例
前端·css·html
大模型铲屎官13 小时前
HTML常见文本标签解析:从基础到进阶的全面指南
前端·css·html·编程·html5·文本标签
真滴book理喻14 小时前
CSS核心
前端·javascript·css
爱掉发的小李15 小时前
JavaScript网页设计案例(任务管理器)
前端·javascript·css·html·css3