HTML+CSS写一个简单的选项卡

最新推荐文章于 2025-06-03 23:12:27 发布

原创

最新推荐文章于 2025-06-03 23:12:27 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML和CSS来创建一个简单的选项卡功能。通过示例代码展示了实现选项卡切换效果的具体步骤和方法。

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

下面是代码实现之后的效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>选项卡制作</title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	ul,li{list-style: none;}
		.box{width: 400px;margin: 20px auto;}
		.hide{display: none;}
		#head {height: 25px;border-bottom: 1px solid blue;}
		
		#head li{float: left;width: 80px;height: 24px;line-height: 24px;
			margin: 0 4px;text-align: center;border: 1px solid blue;
			border-bottom: none;background-color: #f5f5f5;cursor: pointer;}
		#box2{border:1px blue solid;border-top: none;padding: 20px;}
		#head .working{position:relative;height:25px;margin-bottom:-1px;background-color: #fff;}
	</style>

    <script type="text/javascript">
        window.onload=function()
        {
            var hNode=document.getEleme