<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. [Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually

    7down voteaccepted I don't think its necessary to add everything into path.Just add the JAVA_HOME , ...

  2. LeetCode 17 Letter Combinations of a Phone Number （电话号码字符组合）

    题目链接 https://leetcode.com/problems/letter-combinations-of-a-phone-number/?tab=Description HashMap< ...

  3. Linux 常用查找文件或者文件内容

    举例树形图 .|-- test_dir| `-- dir_test_doc.text|-- test_dir2| |-- dir2_test_doc.txt| `-- dir2_test_doc2.t ...

  4. Scrapy计划表

    第一步 Scrapy 一览:理解Scrapy是什么,他能帮到你什么 安装指南:在电脑上安装Scrapy Scrapy 教程:编写第一个Scrapy项目 示例:通过前人写好的Scrapy项目进行学习 基 ...

  5. 微信小程序：wx.navigateTo中url无法跳转问题（app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致）

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

  6. Spring JPA配置讲解

    JPA是Java EE5规范之一,是一个orm规范,由厂商来实现该规范.目前有hibernate,OpenJPA,TopLink和EclipseJPA等实现 Spring提供三种方法集成JPA: 1. ...

  7. 7.24python协程(2)和IO模型

    2018-7-24 08:50:29 异步IO模型 epoll  机制  linux 给每个监听对象绑定回调函数,当要读的对象来了时候,回调函数直接被执行,然后通知用户,效率非常高! python无法 ...

  8. codeforces 355C - Vasya and Robot

    因为在允许的情况下,必然是左右手交替进行,这样不会增加多余的无谓的能量. 然后根据不同的分界点,肯定会产生左手或右手重复使用的情况,这是就要加上Qr/Ql * 次数. 一开始的想法,很直接,枚举每个分 ...

  9. POJ 2195 - Going Home - [最小费用最大流][MCMF模板]

    题目链接:http://poj.org/problem?id=2195 Time Limit: 1000MS Memory Limit: 65536K Description On a grid ma ...

  10. CodeForces - 156B Suspects 逻辑 线性 想法 题

    题意:有1~N,n(1e5)个嫌疑人,有m个人说真话,每个人的陈述都形如X是凶手,或X不是凶手.现在给出n,m及n个陈述(以+x/-X表示)要求输出每个人说的话是true ,false or notd ...