基于javascript实现tab切换特效

本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下

效果图:

实现代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="gb2312">
  <title>实践题 - 选项卡</title>
  <style type="text/css">
    *{
      margin:0px;
      padding:0px;
    }
    #tab{
      margin:10px;
    }
    #tab ul{
      list-style:none;
      height:36px;
      border-bottom:2px solid black ;
      display:block;
    }
    #tab ul li{
      float:left;
      display:inline-block;
      padding:0px 15px;
      height:34px;
      line-height:34px;
      margin-right:5px;
      border:1px solid #ccc;
      border-bottom:none;
      cursor:pointer;
    }
    #tab div{
      padding:5px;
      border:1px solid #ccc;
      border-top:none;

    }
    #tab ul li.on{
      border-top:2px solid black;
      border-bottom: 2px solid white;
    }
    .hide{
      display:none;
    }

  </style>
  <script type="text/javascript">
    window.onload=function(){
     var mytab =document.getElementById("tab");
     var myul=mytab.getElementsByTagName("ul")[0];
     var myli=myul.getElementsByTagName("li");
     var mydiv=mytab.getElementsByTagName("div");
    // alert(mydiv.length)
     for(i=0,len=myli.length;i<len;i++){
       myli[i].index=i;
       myli[i].onclick=function(){
         for(var n=0;n<len;n++){
           myli[n].className="";
           mydiv[n].className="hide";
         }
         this.className="on";
         mydiv[this.index].className="";

       }
     }
    }

  </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
  <ul>
    <li class="on">房产</li>
    <li>家居</li>
    <li>二手房</li>
  </ul>
  <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>
</body>
</html>

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

(0)

相关推荐

  • JavaScript实现简单的tab选项卡切换

    本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ paddi

  • javascript实现tab响应式切换特效

    本文实例讲解了tab响应式切换效果,利用js对样式进行动态切换即可. 多的不说,请看代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,

  • 最简单纯JavaScript实现Tab标签页切换的方式(推荐)

    先说一下最土的一种方法: Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2> <h2 id="tab2" onmouseover="changeTab2()">2</h2> <h2 id=

  • 分步解析JavaScript实现tab选项卡自动切换功能

    本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

  • 基于javascript实现tab选项卡切换特效调试笔记

    本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下 制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式. js源代码: //导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏

  • 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

  • javascript实现不同颜色Tab标签切换效果

    本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下 具体代码: <html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css">

  • 很棒的js Tab选项卡切换效果

    本文实例为大家分享了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; over

  • 4种JavaScript实现简单tab选项卡切换的方法

    本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs

  • 基于javascript实现tab切换特效

    本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px;

  • javascript实现tab切换特效

    本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图: 很简单的javascript实现tab切换特效 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js&qu

  • javascript的tab切换原理与效果实现方法

    本文实例讲述了javascript的tab切换原理与效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <style type="text/css"> #container{border:solid 1px green;width:300px;height:300px;} li{float:left;margin-left:20px;} p{float:left;} #sports,#milit

  • javascript实现tab切换的四种方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:

  • javascript实现tab切换的两个实例

    上一篇<javascript实现tab切换的四种方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿"中国人民大学"官网的tab切换,背景是图片,效果图如下: 鼠标移到新闻时的效果   鼠标移到公告时的效果   鼠标移到交流时的效果   学术.交流和文体的内容为空,我没有写.完整代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=

  • JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)

    效果图如下所示: 废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ padding: } button{ width: 95px; } .active

  • 基于JavaScript实现新年贺卡特效

    目录 动图演示 主要代码 css样式 Javascirpt 动图演示 一款超级炫酷的2022新年快乐html网页特效,霓虹的城市夜景和绚烂的烟花很是特别,该html页面还有交互效果,点击鼠标就会呈现烟花绽放的特效,唯美不过如此.图片可以换成自己喜欢的夜景或人物都可以.​ 主要代码 图片选择引入: html, body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Montserrat, sans

  • 基于JavaScript实现动态雨滴特效

    目录 演示 技术栈 源码 设置画布 js部分 演示 技术栈 介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 它的方法挺多的大家可以去搜一下我就说几个常用的: 源码 设置画布 <canvas id="canvas" style="position:

  • 基于JavaScript实现Tab选项卡切换效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px

随机推荐