基于javascript实现tab切换特效
更新时间：2016年03月29日 16:38:43 作者：回忆没了焦点
这篇文章主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值，需要的朋友可以参考下
本文实例为大家分享了javascript实现tab切换特效代码，供大家参考，具体内容如下
效果图：
实现代码：
<!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实现类似iphone的网页滑屏解锁功能示例【附源码下载】
这篇文章主要介绍了js实现类似iphone的网页滑屏解锁功能,结合完整实例形式分析了javascript动态操作页面元素实现解锁效果的相关实现技巧，并附带供读者源码下载参考,需要的朋友可以参考下2019-06-06
重写document.write实现无阻塞加载js广告(补充)
这篇文章主要介绍了重写document.write实现无阻塞加载js广告,需要的朋友可以参考下2014-12-12
复习一下JS中数组的运用。学习js数组的朋友可以参考下。2010-04-04
这篇文章主要介绍了JavaScript递归函数定义与用法,结合实例形式分析了javascript递归的原理、函数定义、使用方法及操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了js无提示关闭浏览器窗口的两种方法分析,需要的朋友可以参考下2016-11-11
微信小程序图片轮播组件gallery slider使用方法详解
这篇文章主要为大家详细介绍了微信小程序图片轮播组件gallery slider的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了 JavaScript 数据结构之散列表的创建，文章围绕主题相关内容展开详细的介绍，需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了uniapp小程序之配置首页搜索框,我们介绍一下本次开发使用的是uniapp，本次分享内容的搜索框为禁止输入搜索框，点击跳转专属搜索页面，需要的朋友可以参考下2022-09-09
ECharts formatter属性设置的3种方法(字符串模板,函数模板,回调函数)
formatter有两种写法,一种字符串模板,另一种是回调函数,下面这篇文章主要给大家介绍了关于ECharts formatter属性设置的3种方法,分别是字符串模板,函数模板,回调函数,需要的朋友可以参考下2023-02-02
在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题。但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里通过 typeof ,jQuery.type 和 通过构造函数来获取变量类型这三种方法详细介绍一遍。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
最新评论