关于选项卡切换实验javascript
标签：
JavaScript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{
padding:0px;
margin:0px;
font:12px;
}
#tabs
{
width:290px;
padding:5px;
height:190px;
margin:20px;
}
#tabs ul{
list-style:none;
display:block;
height:30px;
/* line-height:30px;*/
border-bottom:2px solid saddlebrown;
}
#tabs ul li{
background:#fff;
cursor:pointer;/*cursor 属性规定要显示的光标的类型（default是指针，pointer是手掌；wait：等待；text：是光标输入；auto默认的*/
float:left;
list-style:none;
height:28px;
line-height:28px;
margin:0px 3px;
border:1px solid #ccc;
/* border-bottom:none;*/
display:inline-block;
/*display:block就是将元素显示为块级元素.
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上;高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)*/
width:60px;
text-align:center;
}
#tabs ul li.on{
border-top:2px solid saddlebrown;
border-bottom:2px solid #fff;
}
#tabs div{
height:120px;
line-height:25px;
border:1px solid #336699;
}
.hide{
display:none;
}
a:link,a:visited{
text-decoration:none;
color:black;
}
a:hover,a:active{
color:orange;
text-decoration:underline;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var oTab=document.getElementById("tabs");
var oUl=oTab.getElementsByTagName("ul")[0];
var oLis=oUl.getElementsByTagName("li");
var oDivs=oTab.getElementsByTagName("div");
for(var i=0,len=oLis.length;i<len;i++)
{
oLis[i].index=i;
/*把i的值储存到index中，在oDivs[this.index].className = "";这句中this.index的值是当前鼠标所在的元素，oLis[i].index = i;的意义是可以让this.index获取任意一个index值
1.通过遍历，给相应的元素设置索引值。
2.将索引值为i的li标签的类名设置为空，也就是暂时删除hide类名 3.this就是指当前高亮的元素
4.让当前的div元素显示*/
oLis[i].onmouseover=function(){
for(var n=0;n<len;n++){
oLis[n].className="";
oDivs[n].className="hide";
}
this.className="on";
oDivs[this.index].className="";
}
};
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
<ul>
<li class="on">房产</li>
<li >家具</li>
<li >二手房</li>
</ul>
<div >
<a href="#">275万购昌平邻铁三居 总价20万买一居</a><br/>
<a href="#">200万内购五环三居 140万安家东三环</a><br/>
<a href="#">北京首现零首付楼盘 53万购东5环50平</a><br/>
<a href="#">京楼盘直降5000 中信府 公园楼王现房</a>
</div>
<div class="hide">
<a href="#">40平出租屋大改造 美少女的混搭小窝</a><br/>
<a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
<a href="#">新中式的酷色温情 66平撞色活泼家居</a><br>
<a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
</div>
<div class="hide">
<a href="#">40平出租屋大改造 美少女的混搭小窝</a><br/>
<a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
<a href="#">新中式的酷色温情 66平撞色活泼家居</a><br>
<a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
</div>
</div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦