介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>选项卡& lt;/title>
& lt;才能style 类型=拔谋?css"祝辞,
,,,# div1 .active {
,,,,,背景:,红色;
,,,,,颜色:,白色;
,,,}
,,,# div1 div {
,,,,,宽度:,237 px;
,,,,,身高:150 px;
,,,,,背景:# CCC;
,,,,,显示:,没有;
,,,}
& lt;才能/style>
& lt;才能script 类型=拔谋?javascript"比;
,,,window=function () {
,,,,,var oDiv =, . getelementbyid (& # 39; div1& # 39;);
,,,,,var btn =, oDiv.getElementsByTagName(& # 39;输入# 39;);
,,,,,var aDiv =, oDiv.getElementsByTagName (& # 39; div # 39;);
,,,,,for (var 小姐:=,0;,小姐:& lt;, btn.length;,我+ +),{
,,,,,,,btn[我].index=我;
,,,,,,,//给btn增加一个指数的属性
,,,,,,,btn[我].onmouseover =,函数(){
,,,,,,,,,for (var 小姐:=,0;,小姐:& lt;, btn.length;,我+ +),{
,,,,,,,,,,,btn[我].className =, & # 39; & # 39;;
,,,,,,,,,,,aDiv[我].style.display =, & # 39;没有# 39;;
,,,,,,,,,}
,,,,,,,,,this.className =, & # 39;活跃# 39;;
,,,,,,,,,aDiv [this.index] .style.display =, & # 39;块# 39;;
,,,,,,,,,//调用指数属性
,,,,,,,}
,,,,,}
,,,};
& lt;才能/script>
& lt;/head>
& lt; body>
& lt;才能div id=癲iv1"比;
,,,& lt; input 类型=癰utton",价值=https://www.yisu.com/zixun/笔滓场崩?“活跃”>
以上是“怎么基于JavaScript实现选项卡效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
小编给大家分享一下怎么基于JavaScript实现选项卡效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
其中用到两个很关键的思想:
1。为对象增加指数属性,并通过这对指数的调用来使每个选项能显示出所对应的内容,并且属性值要设置为循环时的数值我。
2。通过对类(类)的灵活使用,来改变当先所选中目标的样式。
3,用对循环嵌套事件对每一项进行遍历。
4,在编译时,位于身体中的div和输入要有预先定义的行内样式或者信息。
5,按钮和div.style。显示要同时清零,同时出现才能达到选项卡的目的。
代码:
