轻松实现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 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
JSON 数据格式详解
Sep 13 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP中的类型约束介绍
2015/05/11 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python多线程操作实例
2014/11/21 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python装饰器代码深入讲解
2021/03/01 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android