<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. Word 2010 制作文档结构之章节自动编号

    参考:https://jingyan.baidu.com/article/37bce2be129fcc1002f3a2f9.html 1.打开需要章节编号的论文 2.设置格式 注意,这里相同级别的标题 ...

  2. 移动设备 h5屏幕适配

    <meta name="HandheldFriendly" content="true"><meta name="MobileOpt ...

  3. jquery.fly.min.js 拋物插件

    插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...

  4. 2-1 nodejs和npm的安装和环境搭建

    1.安装node.js (最新已经集成npm)  https://nodejs.org/en/ 2.升级npm $ npm install -g npm $ cnpm install -g cnpm ...

  5. XmlSerializer的GenerateTempAssembly性能问题例外

    XmlSerializer的两个构造函数不会出现每次构造都创建TempAssembly的性能问题,其内部做了缓存. public XmlSerializer(Type type) public Xml ...

  6. Python中的str与bytes之间的转换的三种方法

    # bytes object b = b"example" # str object s = "example" # str to bytes sb = byt ...

  7. 【STL】vector的insert方法详解

    #include<vector> #include<iostream> using namespace std; int main() { vector<int>  ...

  8. no such file to load -- bundler/setup

    bundle install rake routesrake aborted!no such file to load -- bundler/setup 解决 gem install bundler

  9. 使用iLO远程管理HP系列服务器

    iLO是Integrated Ligths-out的简称,是HP服务器上集成的远程管理端口,它是一组芯片内部集成vxworks嵌入式操作系统,通过一个标准RJ45接口连接到工作环境的交换机.只要将服务 ...

  10. IOS根据两个经纬度计算相距距离

    //第一种苹果自带的 CLLocation *orig=[[[CLLocation alloc] initWithLatitude:[mainDelegate.latitude_self double ...