js实现选项卡，图层切换

最新推荐文章于 2022-08-16 14:14:22 发布

笨-大叔

最新推荐文章于 2022-08-16 14:14:22 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签：选项卡图层切换 Tab js web前端开发

本文链接：https://blog.csdn.net/u014703834/article/details/32075733

版权

本文介绍如何利用JavaScript实现网页中的选项卡和图层切换功能。通过控制CSS样式属性，特别是display属性来切换元素的可见性。通过设置display为'block'或'none'，可以实现图层的显示与隐藏。作者分享了初步的实现代码，并邀请读者分享更高效的方法。

摘要由CSDN通过智能技术生成

在平常的网页中，选项卡是常见的一直展示方式。今天我将用JS实现图层的切换。可能用到的方法比较笨重，如果你有更好的方法，期待着你与我的分享。

大致思想：实现图层切换，需要通过JS控制图层的CSS样式属性值，从而达到想要的效果。其中，最重要的属性和值是：display=”block/none”;”block”代表着“显示块级”元素，而“none”，则表示“此元素不会被显示”。

菜鸟代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TabControl01</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-06-18 -->
		<style type="text/css">
			.content{margin:0 auto;width:500px;height:450px;}
			.content01{width:500px;height:50px;}
			.co