轻松实现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选项卡操作方法汇总

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

时间: 2016-09-21

js-tab选项卡

说道tab选项卡,顾名思义,就是切换不同内容分类,想必学过前端的都知道,tab有很多方法可以实现,最近刚跟师傅学了一种,感觉很简便,很实用哦. 一.先看一下结果 二.可以根据图来布局,首先上面标签和下面内容, 需要注意的是点击上面a标签的链接和下面div的id一一对应起来, 三.就是最重要的js部分了. 这个地方可以分几个阶段去思考 1.首先得有事件去触发点击 2.获取与内容对应a标签的href,这样就可以对下面进行显示或隐藏, 3.通过唯一的class  -->  active   来切换你想

js实现简单的选项卡效果

效果如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

JS基于面向对象实现的选项卡效果示例

本文实例讲述了JS基于面向对象实现的选项卡效果.分享给大家供大家参考,具体如下: 中间过渡环节:把面向过程的程序,改写成面向对象的形式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 input {background:#CCC;} #div1 .active {background:yellow;} #div1 div {width:200px; height:200

javascript实现tabs选项卡切换效果(自写原生js)

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

Vue.js组件tabs实现选项卡切换效果

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

简单实现js选项卡切换效果

本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下 实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

js实现简单的可切换选项卡效果

本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

js实现tab选项卡函数代码

* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

js实现选项卡内容切换以及折叠和展开效果【推荐】

1.选项卡效果预览 2.源码与简要说明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link rel="stylesheet" href="css/switchTab.css" /> </head> <body> <div

JS封装的选项卡TAB切换效果示例

本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

js中常用的Tab切换效果(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

JS实现简单的tab切换选项卡效果

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m

JS实现仿Windows经典风格的选项卡Tab切换代码

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码.分享给大家供大家参考,具体如下: 这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

js实现tab切换效果实例

直接先来个真相吧:   [HTML代码] <div id="menu"> <!--tag标题--> <ul id="nav"> <li><a href="#" class="selected">tab1</a></li> <li><a href="#" class="">tab2&

JS简单实现tab切换效果的多窗口显示功能

本文实例讲述了JS简单实现tab切换效果的多窗口显示功能.分享给大家供大家参考,具体如下: <div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"&g

JS实现的简单tab切换功能完整示例

本文实例讲述了JS实现的简单tab切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net tab切换</title> <style> * { padding: 0; margin: 0 } body { font-size: 12p

Vue.js实现tab切换效果

Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里

Vue.js组件实现选项卡以及切换特效

Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下 最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

jquery实现的仿天猫侧导航tab切换效果

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h