一、小功能模块——浏览器的tab栏

最新推荐文章于 2025-02-17 15:57:11 发布

原创

最新推荐文章于 2025-02-17 15:57:11 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tab栏 #切换框 #js小功能项目

本文分享了一款适用于新手的简单版网页Tab栏功能模块，通过JavaScript实现切换效果，直接使用，经验证功能有效。理解基础原理，为进阶复杂功能打下基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接下来几天更新，做网页所经常使用到的一些功能模块，

废话不多说，直接附代码，打开即可用，亲测有效。

这个是简单版本的，适合新手，但是所有的复杂的都是在简单的基础上进行修饰，原理是一样的，越努力越优秀

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			ul li{
				float: left;
				padding: 4px 8px;
				cursor: pointer;
			}
			ul{
				overflow: hidden;
				margin-bottom: 14px;
			}
			section>div{
				width: 300px;
				height: 200px;
				border: 1px solid #000;
			}
			li.current{
				background: #ccc;
				border-top: 2px solid green;
			}
			section>div{
				display: none;
			}
			div.current{
				display: block;
			}

		</style>
	</head>
	<body>
		<ul>
			<!-- 
				<li class="current" index="0">热点</li>
				<li index="1">娱乐</li>