<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. Android 本地搭建Tomcat服务器供真机测试

    准备工具:tomcat    环境:win7 + JDK1.8 + tomcat 9.0.13(64bit) 准备工具:tomcat    1.tomcat官网下载   https://tomcat. ...

  2. C# 未能加载文件或程序集“xxx”或它的某一个依赖项。参数错误。(异常来自 HRESULT:0x80070057 (E_INVALIDARG))

    错误信息: 因为电脑突然蓝屏,然后重启,再运行项目,报了这个错. 解决方案: 环境是:VS2012+Win7 通过网上查找, 4.0 删除 C:\Windows\Microsoft.NET\Frame ...

  3. 【CF883B】Berland Army 拓扑排序

    [CF883B]Berland Army 题意:给出n个点,m条有向边,有的点的点权已知,其余的未知,点权都在1-k中.先希望你确定出所有点的点权,满足: 对于所有边a->b,a的点权>b ...

  4. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  5. django和flask的区别

    转载至https://blog.csdn.net/tulan_xiaoxin/article/details/79132214 (1)Flask Flask确实很“轻”,不愧是Micro Framew ...

  6. 使用Properties配置文件 InputStream与FileReader (java)

    java 开发中,常常通过流读取的方式获取 配置文件数据,我们习惯使用properties文件,使用此文件需要注意 文件位置:任意,建议src下 文件名称:任意,扩展名为properties 文件内容 ...

  7. Linux查看及设置系统字符集

    查看正在使用的字符集 查看可以设置的字符集 locale -a 修改字符集 export LANG=zh_CN.gbk

  8. 记一次Castle报错

    CJXX.ServiceTest.PersonRelationMgeSvrTest.GetPersonRelation:SetUp : Castle.MicroKernel.ComponentActi ...

  9. HDU 1789 - Doing Homework again - [贪心+优先队列]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1789 Time Limit: 1000/1000 MS (Java/Others) Memory Li ...

  10. ZOJ 3948 - Marjar Cola

    让我回想起了小学的时候,空瓶换饮料还能向别人借一个空瓶喝了再还回去的神奇问题…… 开始时思考,特判一下a=1或者b=1的情况为INF就可以了,然后发现2 2 1 2这样的样例也是能够喝到无穷多瓶饮料的 ...