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. JS中apply和call的联系和区别

    以下内容翻译自stackoverflow 链接: http://stackoverflow.com/questions/7238962/function-apply-not-using-thisarg ...

  2. Ajax的简单基础

    什么是 AJAX ? AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...

  3. this的五种指法

    this 到底指向哪里 以下如果没提及,则为严格模式. js中作用域有两种: 词法作用域 动态作用域 词法作用域 词法作用域指在书写代码时就被确定的作用域.看如下代码 var value = 1; f ...

  4. 在VS中编译Opencascade6.6.0

    话说,OpenCASCADE团队真的很给力,版本更新速度也是嗖嗖地.依稀记得上次编译OCC,那时候的第三方库.OCC本身几何引擎库,全都得自己编译. 于是,编译过程之艰苦也就可想而知了.最近重换系统, ...

  5. java普通for循环和for-each迭代循环的区别

    PO实体类User: package aA; public class User { private String name; private int many; private int id; pu ...

  6. 矩阵快速幂求Fibonacci

    原理 我们取矩阵A 则 F1=F2=1;则可以轻易求出F(i) #define maxn 2 #define mo 1000000007 struct Matrix{ long long a[maxn ...

  7. bzoj 1123 [POI2008]BLO——点双连通分量

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1123 点双连通分量缩点,然后各种各样. 结果不会写了.比如新连边.记录一个点是割点缩成的点还 ...

  8. mysql8.0 安装版没有my.ini

    这时候,打开 benchmark,看一下实际路径就好了

  9. IO流9 --- 使用FileInputStream和FileOutputStream读写非文本文件 --- 技术搬运工（尚硅谷）

    字节流读写非文本文件(图片.视频等) @Test public void test5(){ File srcFile = new File("FLAMING MOUNTAIN.JPG&quo ...

  10. Leetcode671.Second Minimum Node In a Binary Tree二叉树中的第二小结点

    给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 2 或 0.如果一个节点有两个子节点的话,那么这个节点的值不大于它的子节点的值. 给出这样的一个二叉树,你需要输出所有节点中 ...