轻松实现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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
vue递归实现树形组件
Jul 15 Vue.js
在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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
《猫》教学反思
2014/02/26 职场文书
机电一体化求职信
2014/03/10 职场文书
房产委托公证书
2014/04/08 职场文书
解除财产保全担保书
2014/05/20 职场文书
法人代表证明书格式
2014/10/01 职场文书
爱情保证书
2015/01/17 职场文书
跑出一片天观后感
2015/06/08 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android