1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .box {
  12.             width: 500px;
  13.             height: 400px;
  14.             border: 1px solid #000;
  15.             margin: 100px auto;
  16.             overflow: hidden;
  17.         }
  18.         ul {
  19.             list-style: none;
  20.             width: 600px;
  21.             margin-left: -1px;
  22.             overflow: hidden;
  23.         }
  24.         li {
  25.             width: 100px;
  26.             height: 30px;
  27.             float: left;
  28.             border-left: 1px solid #000;
  29.             background-color: purple;
  30.             cursor: pointer;
  31.             text-align: center;
  32.             line-height: 30px;
  33.         }
  34.         span {
  35.             display: block;
  36.             width: 500px;
  37.             height: 370px;
  38.             font: 700 100px/370px "simsun";
  39.             text-align: center;
  40.             background-color: pink;
  41.         }
  42.  
  43.         .current {
  44.             background-color: yellow;
  45.         }
  46.         .hide {
  47.             display: none;
  48.         }
  49.         .show {
  50.             display: block;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.  
  56.     <div class="box">
  57.         <ul>
  58.             <li>裤子</li>
  59.             <li>帽子</li>
  60.             <li>鞋子</li>
  61.             <li>袜子</li>
  62.             <li>领子</li>
  63.         </ul>
  64.         <span>裤子</span>
  65.         <span>帽子</span>
  66.         <span>鞋子</span>
  67.         <span>袜子</span>
  68.         <span>领子</span>
  69.     </div>
  70.  
  71.     <script>
  72.  
  73.         var liArr = document.getElementsByTagName("li");
  74.         var spanArr = document.getElementsByTagName("span");
  75.  
  76.         for(var i=0;i<liArr.length;i++){
  77. //            liArr[i].index = i;
  78.             liArr[i].setAttribute("index",i);
  79.  
  80.             liArr[i].onmouseover = function () {
  81.                 for(var j=0;j<liArr.length;j++){
  82. //                    liArr[j].className = "";
  83. //                    spanArr[j].className = "hide";
  84.                     liArr[j].setAttribute("class","");
  85.                     spanArr[j].setAttribute("class","hide");
  86.                 }
  87.  
  88. //                this.className = "current";
  89. //                spanArr[this.index].className = "show";
  90.                 this.setAttribute("class","current");
  91.                 spanArr[this.getAttribute("index")].setAttribute("class","show");
  92.             }
  93.         }
  94.  
  95.     </script>
  96.  
  97. </body>
  98. </html>

　　

tab栏切换效 简易效果的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  3. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  4. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  7. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. python经典一百道习题（转自奶酪博客）

    无论学习哪门计算机语言,只要把100例中绝大部分题目都做一遍,就基本掌握该语言的语法了. [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filena ...

  2. iPhone开发小工具

    1.AppIcon: 可以瞬间把图片转换为应用所需要的Icon(Icon-72.png,Icon-72@2x.png,......iTunesArtwork@2x)   2.Resizer: 方便把- ...

  3. 6.3 lambda 表达式

    6.3.1 lambda 表达式是一个可传递的代码块,可以在以后执行一次或者多次. 思考(如何按指定时间间隔完成工作,将这个工作放在一个ActionListener的actionPerformed方法 ...

  4. cgi_and_fastcgi

    CGI 来自维基百科 In computing, Common Gateway Interface (CGI) offers a standard protocol for web servers t ...

  5. URAL 2048 Histroy（打表+模拟）

    因为年历是400年一个循环节的,所以递推出一年的情况,然后递推处理出一个循环节的情况.对于询问,求一个类似前缀和的东西就好了. 跑出来和比样例小一,把A和B加一以后交后AC... 写得时候注意变量的定 ...

  6. poj1338 Ugly Numbers 打表, 递推

    题意:一个数的质因子能是2, 3, 5, 那么这个数是丑数. 思路: 打表或者递推. 打表: 若该数为丑数,那么一定能被2 或者3, 或者5 整除, 除完之后则为1. #include <ios ...

  7. 如何让浏览器关闭后session失效

    llzzcc66 知道合伙人数码行家 推荐于2018-08-10   如果用户不点击网站的“退出”链接,而直接关闭浏览器(或者强制关闭浏览器进程.死机等),服务器无法处理用户退出网站的请求,解决方式如 ...

  8. 《3+1团队》第八次团队作业：Alpha冲刺

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  9. c++：printf和cout那个更好更快些

    现在群里在讨论cout和printf那个快的问题,但我个人觉得printf好: 因为:printf对于一些数据大,以及保留小数位,字符……可以显示出明显的优势如“%s %d %c…………” 虽然pri ...

  10. PAT 乙级 1013

    题目 题目地址:PAT 乙级 1013 思路 审题没把范围看清楚,没一次AC 题中m和n都表示第几个素数,范围是10000,所以查询的数组中需要的素数量至少10000,所以需要计算大概2~120000 ...