在学习 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