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

选项卡切换（纯Javascript&CSS实现）

2017-08-10 17:30 525 查看

1. index属性

用来返回列表中选中的选项的索引位置

optionObject.index

源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Win！</title>
</head>
<style>
#tab{position:relative} /*所有内容的位置相对与浏览器*/
#tab .tablist ul li{ /*设置标题行的样式*/
list-style-type: none;/*去掉li标签d的大圆点*/
float:left; /*设置三个标题左浮，由上至下变为左至右*/
border:1px solid #ccc; /*标题的边框*/
padding:5px 0px; /*设置标题内容与边框的距离 */
width:145px; /*设置标题行的宽度*/
text-align:center; /*标题居中*/
margin-left:-42px; /*外间距，即div块之间的距离*/
margin-right:43px;
position:relative; /*相对于前面元素定位之后的定位*/
cursor:pointer; /*鼠标类型*/
}

#tab .tabcon { /*设置最外层的样式*/
position:absolute;
left:-1px; /*设置内容框在浏览器中定位*/
top:32px;
border:1px solid #828282; /*内容框边界*/
border-top:none; /*设置内容框的上边界为”无边界“*/
width:440px; /*设置长宽*/
height: 300px;

}
#tab .tabcon div{ /*设置内容框的几个子框*/
padding:10px;
position:absolute;
opacity: 0; /*保证打开网页时只显示第一个内容框*/
}
#tab .tablist li.cur0{ /*标题,这个样式是用于打开网页显示第一个标题，内容*/
border-bottom:none;
background:#ccc;

}
#tab .tabcon div.cur1{ /*内容块样式，用于初始化*/
opacity:1;

line-height: 60px;
float:left;
left:15%;

}

</style>
<body>
<div id="tab" style="margin-left:340px;margin-top:20px">
<div class="tablist">
<ul>
<li class="cur0">房产</li>
<li>家具</li>
<li>二手房</li>
</ul>
</div>

<div class="tabcon">
<div class="cur1">275万购昌平邻铁三居总价20万买一居<br>
200万内购五环三居 140万安家东三环<br>
北京首现零首付楼盘 53万购东5环50平<br>
京楼盘直降5000 中信府公园楼王现房</div>
<div>40平出租屋大改造美少女的混搭小窝<br>
经典清新简欧爱家 90平老房焕发新生<br>
新中式的酷色温情 66平撞色活泼家居<br>
瓷砖就像选好老婆卫生间烟道的设计</div>
<div> 通州豪华3居260万二环稀缺2居250w甩<br>
西3环通透2居290万 130万2居限量抢购<br>
黄城根小学学区仅260万 121平70万抛!<br>
独家别墅280万苏州桥2居优惠价248万</div>

</div>
</div>
<script>
window.onload=function()
{
var tab=document.getElementById("tab");
var Divs=tab.getElementsByTagName("div");
var lis=Divs[0].getElementsByTagName("li");/*获取标题数组*/
var contents=Divs[1].getElementsByTagName("div");/*获取内块数组*/
var timer=null; //初始化timer
for(var j=0;j<lis.length;j++)
{
lis[j].index=j;
lis[j].onmouseover=function()
{
show(this.index); //this表示当前对象lis[j];
}
} //这个循环用于对标题绑定索引号以及鼠标事件

function show(a) //显示内容块的函数
{
index=a; //当前索引号
var alpha=0; //alpha用于之后的内容透明度变化效果
for(var i=0;i<lis.length;i++)
{
lis[i].className="";
contents[i].className="";
contents[i].style.opacity=0;
} //这个循环用于隐藏所有的内容
lis[index].className="cur0";
contents[index].className="cur1"; //这两处用于打开网页时显示第一个标题以及内容快
clearInterval(timer);
timer=setInterval( //定时器，造成文字渐变出现的效果
function(){

alpha+=2;
contents[index].style.opacity=alpha / 100;
//这两句话引起渐变效果
if(alpha==100) //达到透明度最大，清除计时器
clearInterval(timer);
}
,30) //30ms实现一次透明度变化
}
}

</script>
</body>
</html>

4000

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航