学习前端的小白们都知道,一个网页的三大要素
- html(结构)
- css(样式)
- javascript(行为)
其中HTML就是一个网页的骨架,而css就是其中的外皮,javascript就是它能做到的和用户的交互。
其中javascript可以渲染html,可以修改css样式。
html今天要翻身做主人了
视频较大我们直接来看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tab{
width: 400px;
margin: 40px auto;
}
//进行内容设置,实现动画效果
ul{
list-style: none;
width: 150px;
height: 0;
transition: all 1s;
overflow: hidden;
background: pink;
}
li{
line-height: 30px;
text-align: center;
}
label {
width: 150px;
height: 30px;
background: deepskyblue;
display: block;
font-size: 14px;
line-height: 30px;
text-align: center;
color: white;
}
//进行点击判断,模拟onclick事件
input:checked+label+ul{
height: 100px;
}
</style>
</head>
<body>
<div id="tab">
//创建inpu标签,利用input自带的checked属性,模仿点击事件
<input type="radio" id="a1" name="a" hidden>
//当表单的id 与label的for值相同时,input的点击效果将同步在lable
<label for="a1">
菜单1
</label>
<ul>
<li>辣子鸡</li>
<li>佛跳墙</li>
<li>红烧肉</li>
</ul>
<input type="radio" id="a2" name="a" hidden>
<label for="a2">
菜单2
</label>
<ul>
<li>可乐鸡翅</li>
<li>北京烤鸭</li>
<li>啤酒鸭</li>
</ul>
<input type="radio" id="a3" name="a" hidden>
<label for="a3">
菜单2
</label>
<ul>
<li>回锅肉</li>
<li>宫保鸡丁</li>
<li>蚂蚁上树</li>
</ul>
</div>
</body>
</html>
利用input表单配合label实现交互效果
只是简单的选项卡效果
ok,效果还是相对可以得哦,如果喜欢得话,请点个赞吧!!!