tab切换

最新推荐文章于 2024-04-23 15:26:18 发布

llx18042693031

最新推荐文章于 2024-04-23 15:26:18 发布

阅读量316

点赞数

文章标签： html js tab切换 web前端

本文链接：https://blog.csdn.net/llx18042693031/article/details/51056925

版权

序言:本人为一名在校学生,此博客为本人原创,由于资质交浅,如有什么不对的地方还请大家多多指正.

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" />

</body>

分别是三个按键,与三个不同的div

布完局后设置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代码:

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">

<styletype="text/css">

div{

width:200px;