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. PAT甲级——A1050 String Subtraction

    Given two strings S​1​​ and S​2​​, S=S​1​​−S​2​​ is defined to be the remaining string after taking ...

  2. 【DM8168学习笔记5】EZSDK目录结构

    EZSDK5.02的目录结构与之前的版本不同,之前的版本各个组件都放在/ezsdk目录下,5.02做了整合. 之前版本:(图片摘自:3.DM816x_1-day_Workshop-Getting_St ...

  3. Python爬虫工程师必学——App数据抓取实战

    Python爬虫工程师必学 App数据抓取实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...

  4. 深入学习：Windows下Git新手教程（下）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyabin001/article/details/35840591 声明:因为本人对于Git ...

  5. zabbix告警模板

    邮件 webhook模板 ZABBIX告警通知 告警状态:[{TRIGGER.STATUS}] 告警主机:[{HOST.NAME}] 主机地址:[{HOST.IP}] 告警时间:[{EVENT.DAT ...

  6. JavaScript内容回顾

    <!DOCTYPE html> <!--JavaScript内容回顾--> <html lang="en"> <head> < ...

  7. #socket #socketserver

    #通过socket 实现简单的ssh#服务端 #服务端 import os import socket server = socket.socket() #server.bind(('0.0.0.0' ...

  8. AC自动机（模板） LUOGU P3808

    传送门 解题思路 AC自动机,是解决多模匹配问题的算法,是字典树与kmp结合的算法,可以解决许多子串在文本串中出现的次数等信息.关键是实现一个fail指针,是指向更靠上的前缀相同字母,从而可以实现在文 ...

  9. bzoj 3110 [Zjoi2013]K大数查询——线段树套线段树（标记永久化）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3110 第一道线段树套线段树! 第一道标记永久化! 为什么为什么写了两个半小时啊…… 本想线段 ...

  10. Linux安装Desktop 和 vncserver

    sudo su - #使用 root 账户 yum grouplist #查看所有可用的group yum groupinstall GNOME Desktop #安装 GNOME 桌面 yum -y ...