<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. JSON类库 Flexjson学习

    官方地址(需FQ):http://flexjson.sourceforge.net/ Flexjson 是一个将 Java 对象转成 JSON 的 类库,是一个深度转换的过程. 下面是我写的一个例子: ...

  2. Android adb录制视频和截屏的dos脚本

    以下是本人写的脚本,用于录制android手机视频.截屏 dos脚本文件名:screenrecord.bat @ECHO OFF CLS color 0a set SCREEN_RECORD_SAVE ...

  3. C# 调用存储过程出错：String[3]: Size 属性具有无效大小值 0

    存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...

  4. 题目1162：I Wanna Go Home（最短路径问题进阶dijkstra算法)）

    题目链接:http://ac.jobdu.com/problem.php?pid=1162 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  5. ZOJ 3435 Ideal Puzzle Bobble

    ZOJ Problem Set - 3435 Ideal Puzzle Bobble Time Limit: 2 Seconds      Memory Limit: 65536 KB Have yo ...

  6. vue开发 - 将方法绑定到window对象，给app端调用

    通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用 ...

  7. SPClaimsUtility.AuthenticateFormsUser的证书验证问题

    Log Parser Studio查看IIS日志发现调用SPClaimsUtility.AuthenticateFormsUser的部分有time-taken在15秒左右的多个响应,查看call st ...

  8. 【CF914G】Sum the Fibonacci 快速？？变换模板

    [CF914G]Sum the Fibonacci 题解:给你一个长度为n的数组s.定义五元组(a,b,c,d,e)是合法的当且仅当: 1. $1\le a,b,c,d,e\le n$2. $(s_a ...

  9. C++ Error : initial value of reference to non-const must be an lvalue

    如下这段代码,编译报错: Error : initial value of reference to non-const must be an lvalue #include <iostream ...

  10. POJ--1050--To the Max（线性动规，最大子矩阵和）

    To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44723 Accepted: 23679 Descript ...