JS Tab切换 选项卡 五种方法
来源:互联网 发布:淘宝短视频服务商 编辑:程序博客网 时间:2024/06/05 10:14
一、遍历ID法
css:
body,h2{margin:0;}
body{font:12px/1.5 "宋体",tahoma,arial;}
h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
h2
.tab{color:yellow;background-color:#999;}
div{width:500px;height:200px;margin:0 auto;border:1px solid blue;display:none;}
.ct{display:block;}
html:
<h2>
<spanid="tab0"class="tab"onmouseover="changeTab()">1</span>
<spanid="tab1"onmouseover="changeTab1()">2</span>
<spanid="tab2"onmouseover="changeTab2()">3</span>
</h2>
<div id="c0"class="ct">11111111111111111111</div>
<div id="c1">222222222222222222</div>
<div id="c2">3333333333333333333</div>
js:
vartab0=document.getElementByIdx_x("tab0");vartab1=document.getElementByIdx_x("tab1");vartab2=document.getElementByIdx_x("tab2");
functionchangeTab(){
c2.className="";}
functionchangeTab1(){
c1.className="ct";c2.className="";}
functionchangeTab2(){
c1.className="";c2.className="ct";}
思路:给每个要控制到的标签都设置id,在js里分别声明,做到精确控制。其次给鼠标要点击的标签添加事件(onclick等)。
然后就是写函数functionchangeTab(),functionchangeTab1(),functionchangeTab2()让它们各自控制各自的内容,该添加class的添加class,该删除class的删除。
缺陷:可扩展性很差,得再添加id,事件,函数。
二、this法
css:
body,h2{margin:0;}
body{font-size:12px;font-family:"宋体",tahoma,arial;}
h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
h2span{width:80px;height:50px;line-height:50px;text-align:center;float:left;}
.tab{color:yellow;background-color:#999;cursor:pointer;}
#tabdiv{width:500px;height:200px;margin:0 auto;border:1px solid blue;display:none;}
#tab.ct{display:block;}
html:
<div id="tab">
<h2>
<span
<span
<span
</h2>
<div class="ct">11111111111111111111</div>
<div>222222222222222222</div>
<div>3333333333333333333</div>
</div>
js:
var
var
function
}
思路:如果细心看,没个标签上的id少了,函数少了,有点像css里面的class,一处书写,遍处用,它带来的优点就是可扩展性很强。
函 数function
三、传参法
html和css大致同上,恕不复述。
不同处:html的this需要改为0,1,2.....(即从0开始有几个写几个)
js:
var
var
function
for(i=0;i<tabs.length;i++){
tabs[i].className="";
cts[i].className="";
}
tabs[num].className="tab";
cts[num].className="ct";
}
思路:其实和this的大致相同,不过专门列出来,有2个原因。
其一:这 次函数里的不是一个if语句,即不能像上面那个那样理解(即如果点击这个span就给它和它相关的div添加class,如果不是就不添加)。这里是 for循环语句,它是不断的循环判断,当然我们这里只有简单的循环,就是去掉已存在的class样式,然后通过传参,在函数里给当前选定的span及其想 同时起作用的元素加上样式。这里有个困扰的问题,为什么要先清空?!答案是为了不重叠,需要先把所有的class给去掉【因为默认的第一个,或者已经点击 过的加载有样式,需要给它先去掉】。
其二:它 的传参和this不同,它需要在html里面写不同的参数这样才能一个个区别开来。就像现实生活里一样,说这个,那个,大家都很明白说的哪个,但是这里如 果参数一样了,就没法区别了,要明白这里的num这个参数不仅仅代表一个,是代表0,1,2.....这些一个个我们点到的个体,我们点到1,它成为1, 我们点到2,它成为2。
四、数组法
css:
body,h2{margin:0;}
body{font-size:12px;font-family:"宋体",tahoma,arial;}
h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
h2
#tab
#ct
#ct
html:
<h2 id="tab">
<span
<span>2</span>
</h2>
<div id="ct">
<div class="ct">11111111111111111111</div>
<div>222222222222222222</div>
</div>
js:
function
vartabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
for (i=0;i<tabs.length;i++){
tabs[i].onclick=tab;
}
function
var
var
for (i=0;i<tabs.length;i++){
tabs[i].className="";
cts[i].className="";
if (tabs[i]==this){
tabs[i].className="tab";
cts[i].className="ct";
}
}
}
window.onload=function (){
changetab();
}
思路:在这种写法中,我们发现css,html和js已经完全分离,这不正是大家所正追求的吗?!所以它值得我们去特别关注,熟练使用,明白其中原理。
function
function
当 点击时,先走for循环语句,把有class都把它们的class给清除了,然后通过判断给当前的tabs(span)加上class,同时给相关联的 cts(div)也添加上class,让其显示。!我们需要注意到this原来是不用特意传参就可以知道是当前点击的对象的,感觉真是智能那~
此外tabs[i].className="tab";这句可以不用非写在if语句里,它可以在for循环语句里。因为tabs[i]==this,即写成:
this.className="tab";
注意window.onload=function (){changetab();}这条命令意思是在页面加载完成后执行里面的函数,里面的可以写函数名(即changetab()全写),也可以只写句柄(即changetab),但后者使得页面只能执行这一条函数。
优点:结构,样式,行为完全分离,可扩展性非常高。
五.事件监听法
html和css同上。
js不同处:
【多了下面这条添加监听事件的函数】
function addEventHandler(target,type,func){
if(target.addEventListener){
target.addEventListener(type,func,false);
}
else{target["on"+type]=func;}
}
【其次】tabs[i].onclick=tab;换为addEventHandler(tabs[i],"click",tab);
- JS Tab切换 选项卡 五种方法
- JS Tab切换 选项卡 五种方法
- js栏目切换 模仿tab选项卡
- tab -选项卡切换js效果
- Tab选项卡切换
- Tab选项卡切换
- Tab选项卡切换
- 选项卡Tab切换
- JS实现Tab标签(选项卡)切换效果
- js实现tab页切换选项卡代码特效
- 【js基础】Tab选项卡切换效果实现
- 简单纯js实现网页tab选项卡切换效果
- 纯JS实现的简单tab选项卡切换效果
- 移动端网页纯原生js选项卡tab切换
- jquery tab选项卡切换
- tab选项卡切换问题
- tab选项卡切换效果
- 切换选项卡tab效果
- Activity在AndroidManifest中的一些配置属性
- 【SSH系列】静态代理&&动态代理
- 什么是用户代理?
- 服务器基础配置(Redhat/CentOS)
- 在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组
- JS Tab切换 选项卡 五种方法
- Fragment的生命周期以及与Activity生命周期联动
- APP开发流程实例讲解-儒释道网络电台八天开发全程-在Android Studio中完成界面设计
- ASP.NET的缓存机制
- 多说 评论系统
- VirtualBox虚拟vdi磁盘扩容
- 愚人的linux内核2440移植札记(超曲折版)
- swift 小知识
- 逆向工程之表达式优化识别(5)-取模