<style>

 *{margin:0;padding:0;}

 body{font-size:14px;font-family:"Microsoft YaHei";}

 ul,li{list-style:none;}

 #tab{position:relative;}

 #tab .tabList ul li{

     float:left;

     background:#fefefe;

     background:-moz-linear-gradient(top, #fefefe, #ededed);

     background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));

     background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));

     border:1px solid #ccc;

     padding:5px 0;

     width:100px;

     text-align:center;

     margin-left:-1px;

     position:relative;

     cursor:pointer;

 }

 #tab .tabCon{

     position:absolute;

     left:-1px;

     top:32px;

     border:1px solid #ccc;

     border-top:none;

     width:403px;

     height:100px;

 }

 #tab .tabCon div{

     padding:10px;

     position:absolute;

     opacity:0;

     filter:alpha(opacity=0);

 }

 #tab .tabList li.cur{

     border-bottom:none;

     background:#fff;

 }

 #tab .tabCon div.cur{

     opacity:1;

     filter:alpha(opacity=100);

 }

 </style>

 </head>

 <body>

 <div id="tab" style="margin-left:460px;margin-top:20px">

   <div class="tabList">

     <ul>

         <li class="cur">许嵩</li>

         <li>周杰伦</li>

         <li>林俊杰</li>

         <li>陈奕迅</li>

     </ul>

   </div>

   <div class="tabCon">

     <div class="cur">断桥残雪、千百度、幻听、想象之中</div>

     <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

     <div>被风吹过的夏天、江南、一千年以后</div>

     <div>十年、K歌之王、浮夸</div>

   </div>

 </div>

 <script>

 window.onload = function() {

     var oDiv = document.getElementById("tab");

     var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");

     var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");

     var timer = null;

     for (var i = 0; i < oLi.length; i++) {

         oLi[i].index = i;

         oLi[i].onmouseover = function() {

             show(this.index);

         }

     }

     function show(a) {

         index = a;

         var alpha = 0;

         for (var j = 0; j < oLi.length; j++) {

             oLi[j].className = "";

             aCon[j].className = "";

             aCon[j].style.opacity = 0;

             aCon[j].style.filter = "alpha(opacity=0)";

         }

         oLi[index].className = "cur";

         clearInterval(timer);

         timer = setInterval(function() {

             alpha += 2;

             alpha > 100 && (alpha = 100);

             aCon[index].style.opacity = alpha / 100;

             aCon[index].style.filter = "alpha(opacity=" + alpha + ")";

             alpha == 100 && clearInterval(timer);

         },

         5)

     }

 }

 </script>

js实现网页tab选项卡切换效果的更多相关文章

  1. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  2. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  3. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  5. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  6. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  7. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  8. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  9. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

随机推荐

  1. 基于spring-cloud的微服务(1) 服务注册中心eureka

    eureka是Netflix提供的服务注册中心组建,springcloud将其做了封装,作为自己的微服务架构中的一个注册中心组建 下面的例子在IDEA中启动一个eureka的实例,然后提供一个prov ...

  2. DragonBones龙骨插槽的隐藏

    参考: 插槽中对象的显示与隐藏问题 let factory = dragonBones.EgretFactory.factory; factory.parseDragonBonesData(RES.g ...

  3. 【CF873F】Forbidden Indices 后缀自动机

    [CF873F]Forbidden Indices 题意:给你一个串s,其中一些位置是危险的.定义一个子串的出现次数为:它的所有出现位置中,不是危险位置的个数.求s的所有子串中,长度*出现次数的最大值 ...

  4. svn和git的优缺点

    git官网api: https://git-scm.com/docs 一. 集中式vs分布式 1. Subversion属于集中式的版本控制系统集中式的版本控制系统都有一个单一的集中管理的服务器,保存 ...

  5. C语言中的数组的使用——混乱的内存管理

    在C语言中想要创建数组只能自己malloc或者calloc,数组复制则是memcpy. 这样创建出来的数组在调用时是不会检测数组边界的,即你声明了一个长度为5的数组,却可以访问第6个位置……也可以给第 ...

  6. APM飞控的使用心得

    硬件资源:APM,F450四轴机架,大疆电调和电机,富斯i6控和接收机. 刚开始的步骤都是大同小异,首先可以按照这个链接上面的步骤一步步的执行:http://tieba.baidu.com/p/297 ...

  7. 【转】单片机中volatile定义的作用详解

    传送门:http://www.eeworld.com.cn/mcu/2011/0411/article_3928.html 一个定义为volatile的变量是说这变量可能会被意想不到地改变,这样,编译 ...

  8. 【问题收录】Ubuntu14.04连接两个双显示器失败的解决方案

    https://blog.csdn.net/chichoxian/article/details/60642533

  9. CodeForces - 669D Little Artem and Dance 想法题 多余操作

    http://codeforces.com/problemset/problem/669/D 题意:n个数1~N围成一个圈.q个操作包括操作1:输入x, 所有数右移x.操作2:1,2位置上的数(swa ...

  10. w_scripting_language

    https://en.wikipedia.org/wiki/Scripting_language A scripting or script language is a programming lan ...