序言:本人为一名在校学生,此博客为本人原创,由于资质交浅,如有什么不对的地方还请大家多多指正.
tab切换在web前端中有着许多的应用,例如焦点图轮播下点击按钮切换图片,就可以用tab切换完成.下边我就以一个小例子讲讲个人对tab切换的理解!
如上图所示,当点击a,b,c按钮时相应的界面也会切换到a,b,c.
首先进行页面的布局:
在html内的body内设置3个按钮(分别是a,b,c),然后再设置3个div(分别用来存放div内显示的a,b,c).
设置按钮可以用input属性来设置:<input type="button" value="a" class="current"/>,其中value内保存的是按钮上的值,这里还给input设置了一个current类,这个类的作用是给按钮设置一个初始状态,有了这个初始状态当打开页面时,即可呈现出来.下边div内的show类作用相同.
设置div:<div class="show">a</div>
主体完整代码:
<body>
<inputtype="button" value="a" class="current"/>
<inputtype="button" value="b" />
<inputtype="button" value="c" />
<div class="show">a</div>
<div>b</div>
<div>c</div>
</body>
分别是三个按键,与三个不同的div
布完局后设置css样式,样式设置非常基础,我在当时我不是很理解的语句后加了注释!
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#ccc;
font-size:100px;
text-align:center;
line-height:200px;
display:none;//将设置的div隐藏,等待调用的时候显示
}
.current{
background-color: aqua;
border-radius:15px;
outline:none;//去掉按键外边系统自带的蓝边
}
.show{
display:block;//将第一个div显示出来
}
</style>
设置js代码:
<script type="text/javascript">
function getarr(tagName){
return document.getElementsByTagName(tagName);
}
var btns = getarr("input");
var divs = getarr("div");
// var btns = document.getElementsByTagName("input");
// var divs = document.getElementsByTagName("div");
for(var i = 0;i<btns.length;i++) {
//把按钮的下标存起
btns[i].index=i;
btns[i].onclick= function(){
//取消所有div与btn的class
for(var j=0; j<btns.length;j++) {
btns[j].className= "";
divs[j].className= "";
}
//设置点击btn与div
this.className="current";
//this.index当前的按钮的下标
//通过下标,从divs数组获取对应div设置
divs[this.index].className="show";
}
}
首先设置了一个函数:
function getarr(tagName){
return document.getElementsByTagName(tagName);
}
var btns = getarr("input");
var divs = getarr("div");
函数的作用是为了获取到input内的button与div,其实在这里运用函数获取比较麻烦,但是由于本人刚刚学完函数,就用上了!当然也是可以直接获取的直接获取的方法:
var btns = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
其次我在js内设置了两个循环
for (vari = 0;i<btns.length;i++) {
//把按钮的下标存起
btns[i].index=i;
btns[i].onclick= function(){
//取消所有div与btn的class
for(var j=0; j<btns.length;j++) {
btns[j].className= "";
divs[j].className= "";
}
//设置点击btn与div
//this.index当前的按钮的下标
this.className="current";
//通过下标,从divs数组获取对应div设置
divs[this.index].className="show";
}
首先通过第一个循环遍历到每一个按钮与div,但是当遍历了所有的按钮与div后,都会将其置成css中所设置的样式,于是第二个循环就起了作用,它将第一层循环时置成的样式又重新置空,这样的话,当我们点击到相应的按键时,都会进行一次循环,循环会将点击的按键置成相应的样式,而其他的按键与图片都会被置成空的状态.这样一来,还剩下的就是如何让按键控制图片的问题了,这里我先将按键的索引值取出然后在赋给图片即可.还有一点就是运用了this属性来改变样式.
btns[i].index=i; //把按钮的下标存起
this.className= "current"; //this.index当前的按钮的下标
divs[this.index].className="show"; //通过下标,从divs数组获取对应div设置
项目完整代码:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
div{
width:200px;
height:200px;
background-color:#ccc;
font-size:100px;
text-align:center;
line-height:200px;
display:none;
}
.current{
background-color: aqua;
border-radius:15px;
outline:none;
}
.show{
display:block;
}
</style>
</head>
<body>
<inputtype="button" value="a" class="current"/>
<inputtype="button" value="b" />
<inputtype="button" value="c" />
<div class="show">a</div>
<div>b</div>
<div>c</div>
</body>
<script type="text/javascript">
function getarr(tagName){
return document.getElementsByTagName(tagName);
}
var btns = getarr("input");
var divs = getarr("div");
// var btns = document.getElementsByTagName("input");
// var divs = document.getElementsByTagName("div");
for(var i = 0;i<btns.length;i++) {
//把按钮的下标存起
btns[i].index=i;
btns[i].onclick= function(){
//取消所有div与btn的class
for(var j=0; j<btns.length;j++) {
btns[j].className= "";
divs[j].className= "";
}
//设置点击btn与div
this.className="current";
//this.index当前的按钮的下标
//通过下标,从divs数组获取对应div设置
divs[this.index].className="show";
}
}
</script>
</html>