怎么用javascript实现选项卡切换效果

Question

如题所述

Answer 1

用javascript实现选项卡切换效果方法如下：

首先制作一个简单的HTML框架，如图：



为使页面形成特定的布局，需要输入对应的CSS，如图：



输入相对应的JavaScript代码，并标注清楚注册相应的事件，如图：



选项卡切换完成。

Answer 2

代码较多，说说原理吧
切换卡原理 ：
html：需要按钮数个，内容容器数个（开始层叠在一起。也可以用js动态添加节点来实现）。
先加载完所有内容容器，只显示一个 ，其它的属性都改为display:none。显示的是display:block。然后再根据鼠标事件来触发隐藏或者显示容器 。
如果需要定时切换 ，那么 把内容容器的 Index 作为数组来循环遍历。 每隔n秒用 时间函数来触发index 的自增行为。本回答被提问者采纳

Answer 3

活动作品如何在一个网页实现登录_注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果