JS练习--选项卡切换

最新推荐文章于 2023-01-05 15:00:37 发布

萌小丹

最新推荐文章于 2023-01-05 15:00:37 发布

阅读量409

点赞数 1

分类专栏： JS 练习笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/lmd_hdx/article/details/125491348

版权

这篇博客介绍了如何使用JavaScript进行选项卡切换的实现，包括两种方法：一、使用for循环，通过遍历按钮并添加点击事件来切换显示的div；二、使用面向对象函数，构建函数并定义入口及切换函数，实现点击按钮时div的显示与隐藏以及按钮的样式切换。

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

一、使用for循环

创建三个按钮，三个div标签。通过css设置标签及按钮状态。
将第一个div标签设置为显现，其他设置为隐藏。第一个button按钮设置类名为active，其他不设置。
创建script标签，在script标签内使用js语言。
获取元素标签。
使用for循环遍历按钮。
添加点击事件。
添加自定义属性获取标签。
点击button按钮对应的div按钮显现。
清除之前的div元素。
给对应得button按钮添加类名获取背景色。
清空之前的类名。以下为具体代码：

<style>
		div{
			width: 300px;
			height: 300px;
			border: 2px solid teal;
			text-align: center;
			font-size: 30px;
			line-height: 300px;
			display: none;
		}
		.active{
			background: orange;
		}
	</style>
</head>
<body>
	<button class="active">个人推荐</button>
	<button>猜你喜欢</button>
	<button>我的收藏</button>
	<div style="display: block;">个人推荐11111</div>
	<div>猜你喜欢2222</div>
	<div>我的收藏3333</div>
    <script>
        // 1.获取元素标签
        var oBtn = do