轻松实现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 强制设为首页的代码
Jan 31 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
javascript object array方法使用详解
Dec 03 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
Vue.js组件实现选项卡以及切换特效
Jul 24 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
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
深入解答关于Python的11道基本面试题
2017/04/01 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python实现某论坛自动签到功能
2019/08/20 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
部队领导证婚词
2014/01/12 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
遗产继承公证书
2014/04/09 职场文书
实习公司领导推荐函
2014/05/21 职场文书
市场调查策划方案
2014/06/10 职场文书
初中学习计划书范文
2014/09/15 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
党校毕业个人总结
2015/02/28 职场文书
离婚代理词范文
2015/05/23 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js