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. Scrapy的Request和Response对象

    一.Request 发送一个请求,参数如下: url :request对象发送请求的url callback :在下载器下载完相应的数据后执行的回调函数 method :请求方法,默认为get hea ...

  2. Django数据库连接丢失问题

    问题 在Django中使用mysql偶尔会出现数据库连接丢失的情况,错误通常有如下两种 1. OperationalError: (2006, 'MySQL server has gone away' ...

  3. bert 预训练模型路径

    google的bert预训练模型: BERT-Large, Uncased (Whole Word Masking): 24-layer, 1024-hidden, 16-heads, 340M pa ...

  4. Thinkphp 错误集锦

    1.无法加载控制器 开始还跑TP核心文件中找错误,结果没找到什么结果.最后还是用程序新建模块才发现问题. 问题是命名空间名字写错了.比如书:本来是Report模块下的IndexContrller,但是 ...

  5. JavaScript--Map,ForEach遍历的比较

    /* forEach只会遍历,不会进行赋值 */ var sum = 0 ; dataArr.forEach(function (value,index,dataArr) { sum +=value. ...

  6. 浏览器在IE8 以下时显示提示信息,提示用户升级浏览器

    <!--[if lt IE 8]> <div style="background: #eeeeee;border-bottom: 1px solid #cccccc;col ...

  7. 磁力搜索网站 BT torrent search engine 推荐 2019/12/25日更新

    btkitty 知名的BT磁力搜索,资源很多,中文友好 btdb 知名的BT磁力搜索,资源很多,中文友好 838888 不错的 BT 磁力搜索引擎,资源很多,中文友好 idope.se 资源丰富的BT ...

  8. nfs网络共享服务基础

    nfs原理 1.开启RPC服务 2.NFS向RPC服务注册启动的端口 3.用户向RPC询问NFS服务的端口 4.RPC返回端口给客户端 5.客户端通过获得的端口与NFS服务器进行数据传输 实验步骤 一 ...

  9. java opencv 4.0.1安装配置

    如果没有把dll扔到jdk会报错 Exception in thread "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no ...

  10. HTTPS的实现

    1.安装专门的mod_ssl模块 [root@contos7 ~]# yum install mod_ssl Loaded plugins: fastestmirror, langpacks Load ...