没学js，如何实现js交互

最新推荐文章于 2023-03-17 23:05:27 发布

置顶 sghu8023

最新推荐文章于 2023-03-17 23:05:27 发布

阅读量362

点赞数 1

文章标签： html js html5 css

本文链接：https://blog.csdn.net/sghu8023/article/details/106693280

版权

学习前端的小白们都知道，一个网页的三大要素

html（结构）
css（样式）
javascript（行为）

其中HTML就是一个网页的骨架，而css就是其中的外皮，javascript就是它能做到的和用户的交互。
其中javascript可以渲染html，可以修改css样式。
html今天要翻身做主人了
无如何js纯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，效果还是相对可以得哦，如果喜欢得话，请点个赞吧！！！

sghu8023

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
没学js，如何实现js交互

学习前端的小白们都知道，一个网页的三大要素html（结构）css（样式）javascript（行为）其中HTML就是一个网页的骨架，而css就是其中的外皮，javascript就是它能做到的和用户的交互。其中javascript可以渲染html，可以修改css样式。html今天要翻身做主人了视频较大我们直接来看代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <
复制链接

扫一扫