您的位置：首页 > Web前端 > JavaScript

如何用js写选项卡

2015-10-17 00:02 429 查看
学js的时候，一个必须要会写的程序就是知道如何写选项卡。例如我们打开一个新浪新闻网站，里面会划分很多块，一个块里面会根据不同的内容划分不同的类别。我们经常要做的是当用户点击某一类别名称时下面出现此类别的新闻信息。

我们在开始之前要知道用js做选项卡的大致思路：

比如做一个简单的选项卡，实现上面三个按钮显示选项，下面三个div显示内容，当鼠标点击某个按钮的时候，相对应的div显示内容。

实现方法：

第一种可称为简单粗暴型，先去掉所有所有按钮上的样式属性及所有div内容都隐藏，然后当点击某个按钮时添加样式，及让对应的div内容显示。

步骤：

1.获取元素，用getElementsByTagName()方法获取这里的input元素和div元素，这样返回的是一个元素的集合，因为是集合，所以要对获取到的元素集合属性进行操作时，便要在后面加上方括号。

2.for循环，首先用for循环给这里的input加上onclick点击事件，然后在事件里再用for循环将给input设置的样式去掉，所有的div内容隐藏。然后当点击某选项时将对应的内容显示出来。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title></title>
<style>
/*这里面是给div块元素添加css样式，css样式可以自己任意设置成自己想要的样式效果 */
body{
margin:0;
padding:0;
}
div{
width:260px;
height:260px;
background:yellow;
border:1px solid #ccc;
display:none; /*这里把div块设置成不显示，如果不设置成隐藏话，页面显示时所有div块内容都显示在页面上，这不是我们想看到的*/
text-align:center;
font-size:30px;
line-height:200%;
margin:5px;
padding:10px;
}
.active{
background:blue;
color:white;
}
</style>
<script>
window.onload=function(){
var aInput=document.getElementsByTagName("input");//获取所有的input标签元素
var aDiv=document.getElementsByTagName("div");//获取div元素
for(var i=0;i<aInput.length;i++){  //循环，给input加上点击事件，在点击时循环让所有选项卡的所有样式去掉，所有内容隐藏，然后让所点击的选项卡及对应内容显示。
aInput[i].index=i;
aInput[i].onclick=function(){

for(var j=0;j<aInput.length;j++){//去掉所有input的class
aInput[j].className="";//设置所有的className为空
aDiv[j].style.display="none";//设置所有的样式为不显示
}
this.className="active";//设置当前className为active
aDiv[this.index].style.display="block";//设置当前点击的相对的div的样式内容为显示
}
}
}
</script>
</head>
<body>
<input type="button" value="选项卡一" class="active"><!--设置页面初始打开时显示的选项卡 -->
<input type="button" value="选项卡二" >
<input type="button" value="选项卡三" >
<div style="display:block">选项卡一内容</div><!--设置页面初始打开时显示的div块内容 -->
<div>选项卡二内容</div>
<div>选项卡三内容</div>

</body>
</html>


另外一种方法是和简单粗暴型方法的不同在于，它是将当前元素下标值存在某个地方，当点击时，再取相对应的下标。相对于上面的代码，便是加入一行aInput[i].index=i，存储一下下标值，添加索引，然后点击事件里的for循环去掉样式和隐藏内容，然后利用索引添加当前样式和显示内容。

js代码更改为：

<script>
window.onload=function(){
var aInput=document.getElementsByTagName("input");//获取元素
var aDiv=document.getElementsByTagName("div");//获取元素
var n=0;//定义变量为0，存一下当前点击的input的索引值。
for(var i=0;i<aInput.length;i++){
aInput[i].index=i;//添加索引值
aInput[i].onclick=function(){
aInput
.className=""; //将下标为n的input元素的className设置为空,即将input设置为不显示
aDiv
.style.display="none";//将下标为n的div元素的样式设置为none,即将div块元素设置为不显示
n=this.index;//将当前索引值赋值给变量n
aInput
.className="active";//将当前点击的input的className赋值为有样式效果的active
aDiv
.style.display="block";//将当前点击的div元素的样式设置为显示
}
}
}
</script>


另外做选项卡时，不想用点击事件时，也可以将onclick点击事件更改为onmouseover或onmouseout等其他样式，但对此处做一个简单的选项卡来说，这都不是重要的。

这里简单选项卡的效果是下面这样的，页面初始时默认选择第一个选项，内容显示为第一个div内容。当点击其他选项时，之前的选项上的样式去掉，添加当前点击选项的样式，同样下面div内容之前的隐藏掉，当前对应的div内容显示。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航