关于javascript:JavaScript选项卡

33次阅读

共计 780 个字符，预计需要花费 2 分钟才能阅读完成。

这里省略掉选项卡的款式，间接进入 js 实现成果的局部。

/*

 选项卡思路：点击按钮的时候，遍历所有的 div，对应的 div 显示
    事后设置变量（显示 div 的下标）var x = 0;
    点击按钮的时候，将这个下标的 div 暗藏，对应的显示进去
    事后设好的变量的值   设置为起初显示的 div 的下标

*/

代码如下：

<body>
   <button class="active">HTML5</button>
   <button>python</button>
   <button>java</button>
   <div style="display:block">HTML5 是 web 中外围语言 html 的标准 </div>
   <div>python 是一种计算机程序设计语言 </div>
   <div>java 是一门面向对象的编程语言 </div>
   
   <script>
        var aDivs = document.getElementByTagName('div');
        var oBtn = document.getElementByTagNmae('button');
        var x = 0;// x 是 div 的下标
        for(var i=0;i<oBtn.length;i++){oBtn[i].index = i;// 把 i 存取来，当成按钮的下标
            oBtn[i].onclick = function(){aDivs[x].style.display = 'none';
                oBtn[x].style.backgroundColor = '#ccc';
                oBtn[x].style.color = '#000';
                
                aDivs[this.index].style.display = 'block';
                this.style.backgroundColor = '#ff6700';
                this.style.color = '#fff';
                x = this.index;// 为了点下次之前，革除上一次
            }
        }
   </script>
</body>

正文完