轻松实现js选项卡切换效果


Posted in Javascript onSeptember 24, 2016

这是要实现的效果图:

轻松实现js选项卡切换效果

一.HTML页面布局

<!-- HTML页面布局 -->
<ul class="tab_menu">
 <li class="selected">房产</li>
 <li>家居</li>
 <li>二手房</li>
</ul>
<div class="tab_box">
 <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>

二.CSS样式制作 

/* CSS样式制作 */ 
*{
font-size:14px;
 font-weight:bold; 
}
 .tab_menu{
 list-style:none; 
margin-left:-35px;
 }
 li{
 float:left;
 /*遮不住底部边的位置,怎么解决?*/
border:1px solid grey;
 border-bottom:none;
 margin-bottom:-3px;
 margin-right:3px;
 width:70px;
 text-align:center;
 padding:7px 0;
 }
 li:hover{
 cursor:pointer;
 }
 .tab_box{
 clear:both;
 width:250px;
 border:1px solid blue;
 border-top:2px solid red;
 }
 .selected{
 background-color:white;
 border-top:2px solid red;
 }
 .tab_box{
 padding:10px 80px 0 10px;
 height:170px;
 }
 .tab_box div{
 height:150px;
 line-height:30px;
 }
 .hide{
 display:none;
 }

三.JS实现选项卡切换 

var ul=document.getElementsByClassName("tab_menu"),
liArr=ul[0].getElementsByTagName("li"),

div=document.getElementsByClassName("tab_box"),

divArr=div[0].getElementsByTagName("div");

 function sibling(element){

var a=[];

var p=element.parentNode.children;

for(var i=0;i<p.length;i++){


if(p[i]!==element) a.push(p[i]);

}
 

return a;
 }
 
for(var i=0;i<liArr.length;i++){

liArr[i].index=i;

liArr[i].onclick=function(){


this.className="selected"; 


var otherLiArr=sibling(this); 


for(var j=0;j<otherLiArr.length;j++){



otherLiArr[j].className="";


} 



for (var z = 0; z < divArr.length; z++) {



divArr[z].className="hide";


}


divArr[this.index].className="";

}
 }

精彩专题分享:javascript选项卡操作方法汇总  jQuery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
vue axios用法教程详解
Jul 23 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 #Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 #Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 #Javascript
打造自己的jQuery插件入门教程
Sep 23 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php学习之function的用法
2012/07/14 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python实现批处理文件
2020/07/28 Python
Python中return函数返回值实例用法
2020/11/19 Python
护士自荐信怎么写
2013/10/18 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
成品仓管员工作职责
2013/12/29 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
感恩教育月活动总结
2014/07/07 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript