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. 装配SpringBean(二)--XML方式介绍

    装配SpringBean,我理解的意思就在容器中定义一个bean,然后让容器通过某种方式找到它.因为在Spring中一切皆资源,资源就是所谓的bean,我们怎么才能从容器中获取这些资源呢?那就是控制反 ...

  2. 取消 ios 上下滑动

  3. DP学习之路（1） 01背包

    动态规划是算法中一门很重要的思想,其通过对每一步的假设规划,不停的寻找最优最有利的解决方案,然后一步一步求解出来. 而01背包是其中最基本的一种dp思想,其题目一般为给定一个容量为V的背包,然后有n件 ...

  4. 关于python中 and 和 or 的一些特殊使用

    print(True or 1)  # True print(1 or True) # 1 print(3 or 1) # 3 print(0 or 3) # 3 总结:or左边无论是 数字还是Boo ...

  5. Python学习之循环--绕圈圈（蛇形盘）

    效果图: 注意哦,右边多出来的一点不是程序有问题,是打印的时候我用的\t,但100,三个字符顶格的时候给顶出去的,我太懒了,不想再调输出格式了,就这么凑合看吧 实现代码: sum = int(inpu ...

  6. Python学习 备注

    python 3.x中urllib库和urilib2库合并成了urllib库..其中urllib2.urlopen()变成了urllib.request.urlopen() urllib2.Reque ...

  7. Luogu P2051 [AHOI2009]中国象棋(dp)

    P2051 [AHOI2009]中国象棋 题面 题目描述 这次小可可想解决的难题和中国象棋有关,在一个 \(N\) 行 \(M\) 列的棋盘上,让你放若干个炮(可以是 \(0\) 个),使得没有一个炮 ...

  8. android 数据绑定(1)Ativity、Fragment、Item绑定数据源

    1.简介 官方文档:  https://developer.android.com/topic/libraries/data-binding 官方示例: https://github.com/andr ...

  9. Spring.Net2.0+NHibernate4.0 +Asp.Net Mvc4 一

    1.创建项目结构 控制器:    SN.Controllers 数据访问 :SN.Dao 实体映射: SN.Models 服务层:     SN.Servers 视图层:   SN.Web 2.添加需 ...

  10. 使用nodejs安装http-server

    一.下载nodejs(https://nodejs.org/) 二.在环境变量中配置nodejs路径: path: D:\Program\nodejs\ 三.打开终端: 使用node -v测试node ...