tab栏切换效果：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul {

             list-style: none;

         }

         .wrapper {

             width: 1000px;

             height: 475px;

             margin: 0 auto;

             margin-top: 100px;

         }

         .tab {

             border: 1px solid #ddd;

             border-bottom: 0;

             height: 36px;

             width: 320px;

         }

         .tab li {

             position: relative;

             float: left;

             width: 80px;

             height: 34px;

             line-height: 34px;

             text-align: center;

             cursor: pointer;

             border-top: 4px solid #fff;

         }

         .tab span {

             position: absolute;

             right: 0;

             top: 10px;

             background: #ddd;

             width: 1px;

             height: 14px;

             overflow: hidden;

         }

         .products {

             width: 1002px;

             border: 1px solid #ddd;

             height: 476px;

         }

         .products .main {

             float: left;

             display: none;

         }

         .products .main.selected {

             display: block;

         }

         .tab li.active {

             border-color: red;

             border-bottom: 0;

         }

     </style>

 </head>

 <body>

 <div class="wrapper">

     <ul class="tab" id="tab">

         <li class="tab-item active">国际大牌<span>◆</span></li>

         <li class="tab-item">国妆名牌<span>◆</span></li>

         <li class="tab-item">清洁用品<span>◆</span></li>

         <li class="tab-item">男士精品</li>

     </ul>

     <div class="products" id="products">

         <div class="main selected">

             <a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>

         </div>

     </div>

 </div>

 </body>

 </html>

 <script>

 //  功能需求：鼠标移入tab选项卡时，

 //      1. 上面tab选项卡要切换

 //      2. 下面产品内容要切换

 //    PS: 提前预知知识点

     var tab = document.getElementById('tab');    // 这句话是在整个网页文档(document)里通过id查找tab

 //  获取products盒子下的div盒子

     var divBoxs = document.getElementById('products').getElementsByTagName('div');

     var tabItem = tab.getElementsByTagName('li'); // 这句是约束在选项卡(tab) 里通过标签名查找li

 //   接着往后书写逻辑，

 //   tab栏效果上方功能需求的描述。

 //   鼠标移入后，排他思想，选择当前选择卡 (前提是选项卡与产品内容页数相同)

     for (var i = 0 ; i < tabItem.length ; i++) {

         tabItem[i].index = i;

         tabItem[i].onmouseover = function () {

             //        排他思想

             for(var j = 0 ; j < tabItem.length ; j++) {

                 tabItem[j].className = "tab-item";

                 divBoxs[j].className = "main";

             }

             //        选中当前选项卡

             this.className = "tab-item active";

             //        选择产品内容页

             divBoxs[this.index].className = "main selected";

         }

     }

 </script>

JavaScript--tab栏切换效果的更多相关文章

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

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

  2. tab栏切换效果案例

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

  3. js 实现tab栏切换效果

    效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. tab栏切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. tab栏切换效果运用案例

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

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

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

  7. tab栏切换

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

  8. JS实现 Tab栏切换案例

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

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

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

随机推荐

  1. Java虚拟机系列（三）---内存溢出情况及解决方法

    因为Java虚拟机内存有堆内存.方法区.虚拟机栈.本地方法栈和程序计数器五部分组成,其中程序计数器是唯一一块不会发生内存溢出异常的内存区,所以只有四类内存区可能发生内存溢出异常,其中虚拟机栈和本地方法 ...

  2. springmvc：请求参数绑定集合类型

    一.请求参数绑定实体类 domain: private String username; private String password; private Double money; private ...

  3. Luogu P4011 孤岛营救问题(状态压缩+最短路)

    P4011 孤岛营救问题 题意 题目描述 \(1944\)年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到 ...

  4. Luogu P1979 华容道(bfs+最短路)

    P1979 华容道 题意 题目描述 小B最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成, 最少需要多少时间. ...

  5. 系统io统计

      $ cat /proc/diskstats sda sda1 sda2 gg- gg- gg- 主号 次号 名称 成功读 合并读 扇区读 读时间   每一列的含义分别为: 第一列为 设备号 (nu ...

  6. django模块安装环境变量

    django 模块 一 安装: 方法一: (在 JetBrains PyCharm 2017.2 软件的) 设置 (里找到) 项目:python +(添加) (搜索) django Install p ...

  7. textarea高度自动增高

    <!--随着textarea 输入内容 自动增加高度--> <script type="text/javascript"> $(".input_t ...

  8. JavaScript的原型链

    首先介绍下原型~原型的作用:把方法放到原型中,就可以让同类型的对象共享 . 当我创建一个构造函数.构造函数里有原型.通过:构造函数名.prototype获取到当前构造函数的原型. function S ...

  9. JS random函数深入理解（转载）

    转载自:(本文对读者有帮助的话请移步支持原作者) http://www.cnblogs.com/starof/p/4988516.html 一.预备知识 Math.ceil();  //向上取整. M ...

  10. java 5 绘图GUI

    ---恢复内容开始--- 绘图的基本原理 color 在awt包里面 字体的相关类 Graphics类常用方法 JFrame 继承JFrame就有主窗口了 Java2D API 绘图的例子 了解Swi ...