很实用的js选项卡切换效果
更新时间：2016年08月12日 11:01:32 作者：回忆没了焦点
很棒的JavaScript选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简单的选项卡切换效果的具体代码，供大家参考，具体内容如下
js选项卡切换代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312">
<title>实践题 - 选项卡</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tab{
margin:10px;
}
#tab ul{
list-style:none;
height:36px;
border-bottom:2px solid black ;
display:block;
}
#tab ul li{
float:left;
display:inline-block;
padding:0px 15px;
height:34px;
line-height:34px;
margin-right:5px;
border:1px solid #ccc;
border-bottom:none;
cursor:pointer;
}
#tab div{
padding:5px;
border:1px solid #ccc;
border-top:none;
}
#tab ul li.on{
border-top:2px solid black;
border-bottom: 2px solid white;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mytab =document.getElementById("tab");
var myul=mytab.getElementsByTagName("ul")[0];
var myli=myul.getElementsByTagName("li");
var mydiv=mytab.getElementsByTagName("div");
// alert(mydiv.length)
for(i=0,len=myli.length;i<len;i++){
myli[i].index=i;
myli[i].onclick=function(){
for(var n=0;n<len;n++){
myli[n].className="";
mydiv[n].className="hide";
}
this.className="on";
mydiv[this.index].className="";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
![[js高手之路]单例模式实现模态框的示例](//img.jbzj.com/images/xgimg/bcimg0.png)
下面小编就为大家带来一篇[js高手之路]单例模式实现模态框的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了javascript实现贪吃蛇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
这篇文章主要介绍了Viewer这一款强大的 jQuery 图像浏览插件,在信息详情页面实现点击图片可以预览,脚本之家也是用的这个js，这里为分享一下使用方法，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了js实现带缓冲效果的仿QQ面板折叠菜单代码,通过JavaScript定时函数递归调用实现折叠菜单的缓冲效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
我们取出数据后可以以json的形式传到前端处理，也可以以Xml Dom的形式传到前端进行处理。下边例子是利用Jquery处理XML Dom的例子。2010-09-09
这篇文章主要为大家详细介绍了JavaScript实现大文件上传功能的示例代码，文中的代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣可以跟随小编一起学习一下2022-11-11
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
延迟加载的函数，第一次调用后，会覆盖原来的老函数，以后再次调用的是新函数，不会再进行条件的判断，提升效率2012-10-10
这篇文章主要给大家介绍了JavaScript删除对象的不必要的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
这篇文章主要为大家详细介绍了小程序实现tab更换页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
![[js高手之路]单例模式实现模态框的示例](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论