这篇文章主要介绍了 js 选项卡的实现方法, 实例分析了 js 选项卡的实现思路及 html+CSS 布局与 js 功能技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 选项卡的实现方法。分享给大家供大家参考。具体分析如下:
一、思路
1. 获取元素;
2. for 循环按钮元素添加 onclick(点击) 或者 onmousemove(移入) 事件;
3. 点击当前按钮时会以高亮状态显示,通过 for 循环历遍把所有的按钮样式设置为空在把所有 div 的 display 设置为 none。
4. 点击当前按钮添加样式,把当前 div 显示出来,display 设置为 block。
二、html 代码:
- <div id="div1">
- <input type="button" class="active" value="1" />
- <input type="button" value="2" />
- <input type="button" value="3" />
- <input type="button" value="4" />
- <div class="div2" style="display:block;">
- 11
- </div>
- <div class="div2">
- 22
- </div>
- <div class="div2">
- 33
- </div>
- <div class="div2">
- 44
- </div>
- </div>
三、css 部分:
- .active
- {
- background:#9CC;
- }
- .div2
- {
- width:300px;
- height:200px;
- border:1px #666666 solid;
- display:none;
- }
四、js 代码:
- <script>
- window.onload=function(){
- var odiv=document.getElementById('div1');//获取div
- var btn=odiv.getElementsByTagName('input');//获取div下的input
- var div2=odiv.getElementsByTagName('div') ;//获取div下的div
- for(i=0;i<btn.length;i++)//循环每个按钮
- {
- btn[i].index=i
- //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i
- btn[i].onclick=function()//按钮的第i个点击事件
- {
- for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏
- {
- btn[i].className='' //清空按钮的样式
- div2[i].style.display='none'//隐藏div
- }
- this.className='active'//自身添加active
- div2[this.index].style.display='block'//this.index是当前div
- }
- }
- }
- </script>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: